拖拽前的頁(yè)面效果為：

下面分別來(lái)解析下上面代碼的意思。

設(shè)置元素可拖放

首先，為了使元素可拖動(dòng)，把 draggable 屬性設(shè)置為 true ：

拖動(dòng)什么 - ondragstart 和 setData()

然后，規(guī)定當(dāng)元素被拖動(dòng)時(shí)，會(huì)發(fā)生什么。

在上面的例子中，ondragstart 屬性調(diào)用了一個(gè)函數(shù)，drag(event)，它規(guī)定了被拖動(dòng)的數(shù)據(jù)。

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

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

在這個(gè)例子中，數(shù)據(jù)類型是 "Text"，值是可拖動(dòng)元素的 id ("drag1")。

放到何處 - ondragover

ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。

默認(rèn)地，無(wú)法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。

這要通過(guò)調(diào)用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

進(jìn)行放置 - ondrop

當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件。

在上面的例子中，ondrop 屬性調(diào)用了一個(gè)函數(shù)，drop(event)：

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

代碼解釋：

• 調(diào)用 preventDefault() 來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開）

• 通過(guò) dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。

• 被拖數(shù)據(jù)是被拖元素的 id ("drag1")

• 把被拖元素追加到放置元素（目標(biāo)元素）中

實(shí)現(xiàn)的結(jié)果如圖：

dataTransfer對(duì)象

在拖曳操作的過(guò)程中，我們可以用過(guò)dataTransfer對(duì)象來(lái)傳輸數(shù)據(jù)，以便在拖曳操作結(jié)束的時(shí)候?qū)?shù)據(jù)進(jìn)行其他的操作。

對(duì)象屬性：

• dropEffect:設(shè)置或返回拖放目標(biāo)上允許發(fā)生的拖放行為。如果此處設(shè)置的拖放行為不再effectAllowed屬性設(shè)置的多種拖放行為之內(nèi)，拖放操作將會(huì)失敗。該屬性值只允許為“null”、“copy”、“l(fā)ink”和“move”四值之一。

• effectAllowed:設(shè)置或返回被拖動(dòng)元素允許發(fā)生的拖動(dòng)行為。該屬性值可設(shè)為“none”、“copy”、“copyLink”、“copyMove”、“l(fā)ink”、“l(fā)inkMove”、“move”、“all”和“uninitialized”。

• items:該屬性返回DataTransferItems對(duì)象，該對(duì)象代表了拖動(dòng)數(shù)據(jù)。

• types:該屬性返回一個(gè)DOMStringList對(duì)象，該對(duì)象包括了存入dataTransfer中數(shù)據(jù)的所有類型。

對(duì)象方法：

• setData(format,data):將指定格式的數(shù)據(jù)賦值給dataTransfer對(duì)象，參數(shù)format定義數(shù)據(jù)的格式也就是數(shù)據(jù)的類型，data為待賦值的數(shù)據(jù)

• getData(format):從dataTransfer對(duì)象中獲取指定格式的數(shù)據(jù)，format代表數(shù)據(jù)格式，data為數(shù)據(jù)。

• clearData([format]):從dataTransfer對(duì)象中刪除指定格式的數(shù)據(jù)，參數(shù)可選，若不給出，則為刪除對(duì)象中所有的數(shù)據(jù)。

• addElement(element):添加自定義圖標(biāo)

• setDragImage(element,x,y):設(shè)置拖放操作的自定義圖標(biāo)。其中element設(shè)置自定義圖標(biāo)，x設(shè)置圖標(biāo)與鼠標(biāo)在水平方向上的距離，y設(shè)置圖標(biāo)與鼠標(biāo)在垂直方向上的距離。

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);
}


 This element is draggable.

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", "
Example paragraph
");
  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));
}

 Drop Zone