站長(zhǎng)資訊網(wǎng)DragEvent是一個(gè)表示drag和drop交互的DOM event接口。用戶通過(guò)將指針設(shè)備（如：鼠標(biāo)）放在目標(biāo)的表面開始拖動(dòng)，然后拖動(dòng)指針到一個(gè)新的位置（如其他DOM元素）。應(yīng)用程序自動(dòng)的解析拖放交互。DragEvent接口從mouseEvent和Event那兒繼承屬性。
Event types
DragEvent并不是一個(gè)單一的事件，它包含了多個(gè)事件，這些事件分別是：drag，dragstart，dragenter，dragend，dragover，dragexit，dragleave，drop。
drag：這個(gè)事件在元素拖拽的過(guò)程中反復(fù)觸發(fā)，每一百毫秒觸發(fā)一次。這事件的目標(biāo)元素是被拖的那個(gè)元素，該事件可冒泡，可取消默認(rèn)行為。
dragstart：這個(gè)事件在用戶開始拖動(dòng)時(shí)觸發(fā)。這個(gè)事件的目標(biāo)元素是被拖的那個(gè)元素，在這些事件中，dragstart事件最先觸發(fā)。該事件可冒泡，可取消默認(rèn)行為。
dragenter：這個(gè)事件在被拖的元素進(jìn)入一個(gè)合法的可drop目標(biāo)時(shí)觸發(fā)。這個(gè)事件的目標(biāo)元素是這個(gè)可drop目標(biāo)。該事件可冒泡，可取消默認(rèn)行為。
dragover：當(dāng)被拖的元素在可drop目標(biāo)范圍內(nèi)移動(dòng)時(shí)反復(fù)觸發(fā)這個(gè)事件，一百毫秒觸發(fā)一次。這個(gè)事件的目標(biāo)元素是這個(gè)可drop目標(biāo)。該事件可冒泡，可取消默認(rèn)行為。
dragend：當(dāng)拖拽結(jié)束時(shí)觸發(fā)這個(gè)事件，這個(gè)事件的目標(biāo)元素是被拖的元素。在這些事件中dragend最后觸發(fā)。該事件可冒泡，不能取消默認(rèn)行為。
dragleave：這個(gè)事件在被拖得元素離開合法的可drop目標(biāo)時(shí)觸發(fā)。這個(gè)事件的目標(biāo)元素是這個(gè)可drop目標(biāo)。該事件可冒泡，不能取消默認(rèn)行為。
dragexit：當(dāng)一個(gè)可drop元素不再是拖拽操作最近的drop目標(biāo)時(shí)觸發(fā)這個(gè)事件。這個(gè)事件的目標(biāo)元素是這個(gè)可drop元素。該事件可冒泡，不嫩取消默認(rèn)行為。
drop：當(dāng)在可drop目標(biāo)上松開拖動(dòng)元素的指針設(shè)備時(shí)觸發(fā)這個(gè)事件，該事件的目標(biāo)元素是這個(gè)可drop目標(biāo)。drop事件在dragend事件觸發(fā)之前觸發(fā)。這個(gè)事件可冒泡，可取消默認(rèn)行為。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test target</title> <style type="text/css"> #drag{ width:200px; height:200px; background-color: aqua; } .drop{ width: 300px; height: 300px; background-color: antiquewhite; } </style> </head> <body> <p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')"> 我可以拖動(dòng) </p> <img src="test.jpg" id="img"> <p class="drop"></p> <script type="text/javascript"> document.addEventListener('drag',function(event){ event.target.style.backgroundColor = 'black'; },false); document.addEventListener('dragstart',function(event){ event.target.style.backgroundColor = 'red'; },false); document.addEventListener('dragend',function(event){ event.target.style.backgroundColor = 'yellow'; },false); document.addEventListener('dragover',function(event){ event.preventDefault(); event.target.style.backgroundColor = 'blue'; },false); document.addEventListener('dragenter',function(event){ event.target.style.backgroundColor = 'green'; },false); document.addEventListener('dragleave',function(event){ event.target.style.backgroundColor = 'pink'; },false); document.addEventListener('dragexit',function(event){ event.target.style.backgroundColor = 'red' },false); document.addEventListener('drop',function(event){ event.preventDefault(); event.target.style.backgroundColor = 'white'; console.log(2); },false) </script> </body> </html>
這些事件的事件對(duì)象包含鼠標(biāo)事件的事件對(duì)象的方法與屬性。之外還存在一個(gè)dataTransfer屬性
讓元素可拖
在HTML中默認(rèn)可拖的元素只有image，link及被選擇的文本。要讓其他元素可拖，需要做下面這三件事：
1.給元素設(shè)置一個(gè)draggable屬性，并且將這個(gè)屬性的值設(shè)置為true
2.在這個(gè)元素上添加一個(gè)dragstart的事件監(jiān)聽
3.在dragstart的事件監(jiān)聽上通過(guò)event.DataTransfer.setData(type,value)設(shè)置拖拽數(shù)據(jù)。
<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"> This text <strong>may</strong> be dragged. </p>
如果draggable屬性被禁止或者設(shè)置為false，那么這個(gè)元素不能被拖拽。draggable屬性可以在任何屬性上設(shè)置。當(dāng)一個(gè)元素設(shè)置為可拖，在這個(gè)元素上點(diǎn)擊或拖動(dòng)鼠標(biāo)，這個(gè)元素里的文本或其他元素不會(huì)被選中。當(dāng)用戶開始拖動(dòng)，dragstart事件會(huì)被觸發(fā)，在dragstart事件中，你能夠通過(guò)setData()指定拖拽數(shù)據(jù)，通過(guò)setDragImage()指定圖片反饋，以及通過(guò)設(shè)置effectAllowed屬性和dropEffect屬性指定拖拽效果。拖拽數(shù)據(jù)是必須指定的，但是圖片反饋是拖拽效果不是必須的
拖拽數(shù)據(jù)
拖拽數(shù)據(jù)包含兩部分信息，分別是數(shù)據(jù)的類型和數(shù)據(jù)的值，數(shù)據(jù)的類型是字符串，數(shù)據(jù)的值也是字符串形式。 拖拽數(shù)據(jù)的類型有：text/plain,text/html,image/jpeg,text/uri-list等，還能夠自定義類型。
可以多次調(diào)用setData()方法設(shè)置多個(gè)拖拽數(shù)據(jù)。如下：
var dt = event.dataTransfer; dt.setData("application/x-bookmark",bookmarkString); dt.setData('text/uri-list','www.baidu.com'); dt.setData('text/plain','drag data');
application/x-bookmark是自定義類型。
如果通過(guò)這個(gè)方法設(shè)置新的類型的數(shù)據(jù)，那么這個(gè)新的拖拽數(shù)據(jù)會(huì)位于拖拽數(shù)據(jù)列表的尾部，如果設(shè)置以及存在的類型的數(shù)據(jù)，那么新的數(shù)據(jù)會(huì)覆蓋舊的數(shù)據(jù)。
通過(guò)getData()能夠得到指定類型的拖拽數(shù)據(jù)
通過(guò)clearData()能夠清除指定類型的拖拽數(shù)據(jù)
圖片反饋
圖片反饋并不是必須設(shè)置的，默認(rèn)它是從拖拽目標(biāo)上生成的一個(gè)半透明圖片，并且這個(gè)圖片在拖拽期間會(huì)跟著鼠標(biāo)移動(dòng)。你能夠通過(guò)setDragImage(image,xOffect,yOffect)方法自定義圖片反饋。
setDragImage()接受三個(gè)參數(shù)，第一個(gè)參數(shù)表示圖片引用，第二個(gè)和第三個(gè)表示圖片左上角相對(duì)于鼠標(biāo)指針的位置。單位是像素
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test target</title> <style type="text/css"> #drag{ width:200px; height:200px; background-color: aqua; } .drop{ width: 300px; height: 300px; background-color: antiquewhite; } </style> </head> <body> <p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')"> 我可以拖動(dòng) </p> <img src="test.jpg" id="img"> <p class="drop"></p> <script type="text/javascript"> document.addEventListener('dragstart',function(event){ event.target.style.backgroundColor = 'red'; event.dataTransfer.setDragImage(document.getElementById('img'),30,30); },false); </script> </body> </html>
拖拽效果
通過(guò)設(shè)置effectAllowed和dropEffect可以指定拖拽效果
事件對(duì)象的dataTransfer屬性
dataTransfer屬性是一個(gè)DataTransfer對(duì)象，在這個(gè)屬性中保存了拖拽操作過(guò)程中的數(shù)據(jù)，它可能保存一個(gè)或者多個(gè)數(shù)據(jù)項(xiàng)。這個(gè)屬性是只讀的。
dataTransfer屬性中的標(biāo)準(zhǔn)屬性
1.dropEffect
得到當(dāng)前drag and drop操作的類型，或者設(shè)置給當(dāng)前drag and drop 設(shè)置新的類型。這個(gè)屬性可能取值是none，copy，move，link。這屬性會(huì)影響拖拽過(guò)程中的鼠標(biāo)的顯示形式。
2.effectAllowed
這個(gè)屬性用于指定運(yùn)行的拖拽操作效果，可選的值有none，all，copy，move，link，copyLink，copyMove，linkMove。默認(rèn)情況這個(gè)值是all，如果要設(shè)置這個(gè)屬性的值就要在dragstart的事件處理程序里進(jìn)行設(shè)置。
3.files
包含了在data transfer中的所有可用的本地文件列表，如果被拖拽操作沒(méi)有涉及文件，那么它是一個(gè)空列表。
4.items
是一個(gè)包含了所有拖拽數(shù)據(jù)的列表。它是一個(gè)DataTransferItemList對(duì)象。
5.types
它是一個(gè)字符串?dāng)?shù)組，這個(gè)數(shù)組中包含在dragstart事件處理程序中設(shè)置的拖拽事件的類型，如果拖拽操作不存在數(shù)據(jù)，那么他得到一個(gè)空數(shù)組。
DataTransfer屬性的標(biāo)準(zhǔn)方法
1.clearData(type):移除給定類型相關(guān)的拖拽數(shù)據(jù)。接受一個(gè)可選的參數(shù)，如果這個(gè)參數(shù)是空或者沒(méi)有指定，那么移除所以類型的數(shù)據(jù)，如果指定的類型不存在或者data transfer中不包含數(shù)據(jù)，那么這個(gè)方法不會(huì)產(chǎn)生什么影響。
2.getData(type):得到指定類型的拖拽數(shù)據(jù)。如果指定類型的數(shù)據(jù)不存在或者data transfer中不包含數(shù)據(jù)， 得到一個(gè)空的字符串。
3.setData(type，value):設(shè)置給定類型的拖拽數(shù)據(jù)。接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是類型，第二個(gè)參數(shù)是指定類型的值。 如果這個(gè)類型的值不存在，那么在類型列表的最后添加一個(gè)新的格式，如果已經(jīng)存在的,那么在相同的位置 存在的數(shù)據(jù)被替換.
4.setDragImage(image，xoffset，yoffset):接受三個(gè)參數(shù)，第一個(gè)參數(shù)是圖片的引用，第二個(gè)和第三個(gè)參數(shù)是移動(dòng)的圖片的 左上角相對(duì)鼠標(biāo)的位置。
DataTransferList對(duì)象
通過(guò)dataTransfer.items得到的值就是DataTransferList對(duì)象。
DataTransferList對(duì)象的屬性
1.length:得到拖拽數(shù)據(jù)的數(shù)量
DataTransferList對(duì)象的方法
1.add()：向拖拽數(shù)據(jù)列表中添加一個(gè)新的拖拽數(shù)據(jù)，添加成功后返回這個(gè)新的拖拽數(shù)據(jù)。當(dāng)添加一個(gè)文件到拖拽數(shù)據(jù)列表中，這個(gè)方法只接受一個(gè)文件對(duì)象作為參數(shù)。當(dāng)添加一個(gè)給定 類型的字符串到拖拽數(shù)據(jù)列表中，這個(gè)方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是數(shù)據(jù)，第二個(gè)參數(shù)是類型。
2.remove(index):從拖拽數(shù)據(jù)列表中移除指定位置的拖拽數(shù)據(jù)。這個(gè)方法接受一個(gè)表示位置的參數(shù)，如果這個(gè)參數(shù)小于0或者大于拖拽數(shù)據(jù)列表的長(zhǎng)度，拖拽數(shù)據(jù)列表不會(huì)發(fā)生改變。
3.clear():移除拖拽數(shù)據(jù)列表中所有的拖拽數(shù)據(jù)。不需要參數(shù)。
4.DataTransferItem(index):得到指定位置上的拖拽數(shù)據(jù)。接受一個(gè)表示位置的參數(shù)， 這個(gè)方法簡(jiǎn)寫形式是數(shù)組索引。
DataTransferItem對(duì)象
dataTransfer.items中的每一項(xiàng)都是DataTransferItem對(duì)象。
DataTransferItem對(duì)象的屬性
1.kind：得到拖拽數(shù)據(jù)的鍵，可能的值有file和string
2.type：得到拖拽數(shù)據(jù)的類型，是MINE type
DataTransferItem對(duì)象的方法
1.getAsFile():返回拖拽數(shù)據(jù)的文件對(duì)象。如果拖拽數(shù)據(jù)不是文件則返回null
2.getAsString(function):調(diào)用回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)將拖拽數(shù)據(jù)項(xiàng)的字符串形式作為它的參數(shù)
拖拽文件
要使文件能夠被拖放的一個(gè)重要步驟是定義一個(gè)放置區(qū)域。并且為放置區(qū)域添加drop，dragover和dragend事件處理程序。
當(dāng)為一個(gè)元素添加drop事件的處理程序，及在dragover事件處理程序中取消瀏覽器的默認(rèn)行為，那么這個(gè)元素就是放置區(qū)域。
另外，在drag和drop操作結(jié)束之后，應(yīng)用程序應(yīng)該移除拖拽數(shù)據(jù)（可能是一個(gè)或者多個(gè)文件），數(shù)據(jù)的清理通常在 dragend事件處理程序中。
<p id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend = "dragend_handler(event)"> <strong><Drag one or more files to this Drop Zone ...</strong> </p>
例子一，訪問(wèn)文件名
function drop_handler(ev) { console.log("Drop"); ev.preventDefault(); // If dropped items aren't files, reject them var dt = ev.dataTransfer; if (dt.items) { // Use DataTransferItemList interface to access the file(s) for (var i=0; i < dt.items.length; i++) { if (dt.items[i].kind == "file") { var f = dt.items[i].getAsFile(); console.log("... file[" + i + "].name = " + f.name); } } } else { // Use DataTransfer interface to access the file(s) for (var i=0; i < dt.files.length; i++) { console.log("... file[" + i + "].name = " + dt.files[i].name); } } }
例子二，阻止瀏覽器默認(rèn)行為
function dragover_handler(ev) { console.log("dragOver"); // Prevent default select and drag behavior ev.preventDefault(); }
例子三，清除數(shù)據(jù)
function dragend_handler(ev) { console.log("dragEnd"); // Remove all of the drag data var dt = ev.dataTransfer; if (dt.items) { // Use DataTransferItemList interface to remove the drag data for (var i = 0; i < dt.items.length; i++) { dt.items.remove(i); } } else { // Use DataTransfer interface to remove the drag data ev.dataTransfer.clearData(); } }
