HTML5 拖放（Drag 和 Drop）詳解與實例

時間 2019-11-11

標籤 html5 html 拖放 drag drop 詳解實例欄目 HTML5 简体版

原文原文鏈接

簡介

拖放是一種常見的特性，即抓取對象之後拖到另外一個位置。html

在 HTML5 中，拖放是標準的一部分，任何元素都可以拖放。html5

先點擊一個小例子：在用戶開始拖動 <p> 元素時執行 JavaScript瀏覽器

<p draggable="true" ondragstart="myFunction(event)">拖動我!</p>

提示：連接和圖片默認是可拖動的，不須要 draggable 屬性。app

定義和用法

在拖放的過程當中會觸發如下事件：函數

在拖動目標上觸發事件 (源元素):
- ondragstart - 用戶開始拖動元素時觸發
- ondrag - 元素正在拖動時觸發
- ondragend - 用戶完成元素拖動後觸發

釋放目標時觸發的事件:
- ondragenter - 當被鼠標拖動的對象進入其容器範圍內時觸發此事件
- ondragover - 當某被拖動的對象在另外一對象容器範圍內拖動時觸發此事件
- ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件
- ondrop - 在一個拖動過程當中，釋放鼠標鍵時觸發此事件

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動。post

注意:Safari 5.1.2不支持拖動；在拖動元素時，每隔 350 毫秒會觸發 ondragover 事件。spa

實例

先貼代碼，再逐一解釋：code

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖動img_w3slogo.gif圖片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">

<script>
function allowDrop(ev){
    ev.preventDefault();
}

function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

</script>
</body>
</html>

拖拽前的頁面效果爲：orm

下面分別來解析下上面代碼的意思。htm

設置元素可拖放

首先，爲了使元素可拖動，把 draggable 屬性設置爲 true ：

<img draggable="true">

拖動什麼 - ondragstart 和 setData()

而後，規定當元素被拖動時，會發生什麼。

在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。

dataTransfer.setData() 方法設置被拖數據的數據類型和值：

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。

放到何處 - ondragover

ondragover 事件規定在何處放置被拖動的數據。

默認地，沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。

這要經過調用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

進行放置 - ondrop

當放置被拖數據時，會發生 drop 事件。

在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

代碼解釋：

調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以連接形式打開）
經過 dataTransfer.getData("Text") 方法得到被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據。
被拖數據是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標元素）中

實現的結果如圖：

dataTransfer對象

在拖曳操做的過程當中，咱們能夠用過dataTransfer對象來傳輸數據，以便在拖曳操做結束的時候對數據進行其餘的操做。

對象屬性：

dropEffect:設置或返回拖放目標上容許發生的拖放行爲。若是此處設置的拖放行爲再也不effectAllowed屬性設置的多種拖放行爲以內，拖放操做將會失敗。該屬性值只容許爲「null」、「copy」、「link」和「move」四值之一。
effectAllowed:設置或返回被拖動元素容許發生的拖動行爲。該屬性值可設爲「none」、「copy」、「copyLink」、「copyMove」、「link」、「linkMove」、「move」、「all」和「uninitialized」。
items:該屬性返回DataTransferItems對象，該對象表明了拖動數據。
types:該屬性返回一個DOMStringList對象，該對象包括了存入dataTransfer中數據的全部類型。

對象方法：

setData(format,data):將指定格式的數據賦值給dataTransfer對象，參數format定義數據的格式也就是數據的類型，data爲待賦值的數據
getData(format):從dataTransfer對象中獲取指定格式的數據，format表明數據格式，data爲數據。
clearData([format]):從dataTransfer對象中刪除指定格式的數據，參數可選，若不給出，則爲刪除對象中全部的數據。
addElement(element):添加自定義圖標
setDragImage(element,x,y):設置拖放操做的自定義圖標。其中element設置自定義圖標，x設置圖標與鼠標在水平方向上的距離，y設置圖標與鼠標在垂直方向上的距離。

Identify what is draggable

function dragstart_handler(ev) {
 console.log("dragStart");
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("text/plain", ev.target.id);
}

<body>
 <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
</body>

Define the drag's data

function dragstart_handler(ev) {
  // Add the drag data
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}

Define the drag image

function dragstart_handler(ev) {
  // Create an image and then use it for the drag image.
  // NOTE: change "example.gif" to an existing image or the image 
  // will not be created and the default drag image will be used.
  var img = new Image(); 
  img.src = 'example.gif'; 
  ev.dataTransfer.setDragImage(img, 10, 10);
}

Define the drag effect

function dragstart_handler(ev) {
  // Set the drag effect to copy
  ev.dataTransfer.dropEffect = "copy";
}

Define a drop zone

function dragover_handler(ev) {
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
<body>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>

火狐瀏覽器拖拽問題

可是進行到這兒在火狐瀏覽器中發現一個問題：

html5的拖拽，用了preventDefault防止彈出新頁面，但在火狐下無論用？

解決辦法：

document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
}

或者對於上面的實例中，添加到ondrop方法裏面也是能夠的：

function drop(ev){
    ev.preventDefault();
    ev.stopPropagation();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}