拖放（Drag 和drop）是html5 標準的組成部分。
瀏覽器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及Safari 5 支持拖放。
被拖元素，dragElement :
1、添加事件： ondragstart 2、添加屬性： dragable放置元素，dropElement:
1、添加事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop
和mouser劃入劃出一類的事件很類似，字面也很好理解，不贅述了，下面會用例子來說明。
1、頁面上元素間的拖放
下面用個小例子，div間的拖放來展示，各個事件如何被觸發：
<!DOCTYPE html><html><head> <title></title> <meta charset=utf-8/> <style type=text/css> #dropEle div { float: left; } </style> <script src=../../jquery-1.8.3.js type=text/javascript charset=utf-8></script> <script type=text/javascript> /** * 拖放（Drag 和drop）是HTML5 標準的組成部分。 * 瀏覽器支持*Internet Explorer 9、Firefox、Opera 12、Chrome 以及Safari 5 支持拖放。 */ $(function () { $(#dragEle)[0].ondragstart = function (event) { console.log(dragStart); event.dataTransfer.setData(Text, event.target.id); }; /* * * 當放置被拖數據時，會發生drop 事件。 * 調用preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開） * @param event */ $(#dropEle )[0].ondrop = function (event) { /* for (var p in event.dataTransfer) { console.log(p + = + event.dataTransfer[p] + @@); } */ console.log( onDrop); var id = event.dataTransfer.getData(Text); $(this).append($(# + id).clone().text($(this).find(div).length)); event .preventDefault(); }; /** * ondragover 事件規定在何處放置被拖動的數據。 *默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。 */ $(#dropEle)[0].ondragover = function (event) { console.log(onDrop over); event.preventDefault(); } $(#dropEle)[0].ondragenter = function (event) { console.log(onDrop enter); } $(#dropEle)[0].ondragleave = function (event) { console.log(onDrop leave); } $(#dropEle)[0].ondragend = function (event) { console.log(onDrop end); } }); </script></head><body><div style=border: 1px solid red ; width: 100px ; height: 100px ;text-align: center ;line-height: 100px; draggable=true id=dragEle ></div><div style=width: 330px;min-height: 202px;border: 1px solid #444;margin-top: 20px;overflow-y: scroll ; id=dropEle></div></body></html>需要注意幾點：
a、ondragover中必須組織事件的默認行為，默認地，無法將數據/元素放置到其他元素中。
b、drop 事件的默認行為是以鏈接形式打開，所以也需要阻止其默認行為。
還有可能注意到：在拖放時，event中包含一個event.dataTransfer 對象，上例中我們使用了該對象的setData方法傳遞了拖動div的id，然後在drop中取得該id，並且複制了該元素添加到放置的div中。
下面介紹下該對象的其他方法：
event.dataTransfer ：
items = [object DataTransferItemList] @@drag_drop.html:44
files = [object FileList] @@drag_drop.html:44
types = text/plain @@drag_drop.html:44
effectAllowed = all @@drag_drop.html:44
dropEffect = none @@drag_drop.html:44
clearData = function clearData() { [native code] } @@drag_drop.html:44
getData = function getData() { [native code] } @@drag_drop.html:44
setData = function setData() { [native code] } @@drag_drop.html:44
setDragImage = function setDragImage() { [native code] } @@
我使用了js打印出了它所有的屬性:
1、getData,setData上例已經使用了，clearData就是清除設置的數據。
2、值得注意的是files，當把操作系統中選擇的一個或多個文件拖入該div中，files中會存儲拖入文件的信息，然後我們通過file可以得到文件的類型，長度，內容然後實現上傳。
3、setDragImage(image, x, y)用於設置鼠標移動過程中隨鼠標一起移動的效果圖。必須在dragstart中設置。
4、types,effectAllowed和dropEffect分別是拖入元素的類型，拖拽過程中鼠標顯示的樣式，我覺得可以忽略了這幾個屬性，一般用不到。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。