DragEvent是一個表示drag和drop互動的DOM event介面。使用者透過將指標裝置（如：滑鼠）放在目標的表面開始拖曳，然後拖曳指標到新的位置（如其他DOM元素）。應用程式自動的解析拖放互動。 DragEvent介面從mouseEvent和Event那兒繼承屬性。
Event types
DragEvent並不是單一的事件，它包含了多個事件，這些事件分別是：drag，dragstart，dragenter，dragend，dragover，dragexit，dragleave ，drop。
drag：這個事件在元素拖曳的過程中反覆觸發，每一百毫秒觸發一次。這事件的目標元素是被拖曳的那個元素，該事件可冒泡，可取消預設行為。
dragstart：這個事件在使用者開始拖曳時觸發。這個事件的目標元素是被拖曳的那個元素，在這些事件中，dragstart事件會先被觸發。此事件可冒泡，可取消預設行為。
dragenter：這個事件在被拖曳的元素進入一個合法的可drop目標時觸發。這個事件的目標元素就是這個可drop目標。此事件可冒泡，可取消預設行為。
dragover：當被拖曳的元素在可drop目標範圍內移動時反覆觸發這個事件，一百毫秒觸發一次。這個事件的目標元素就是這個可drop目標。此事件可冒泡，可取消預設行為。
dragend：當拖曳結束時觸發這個事件，這個事件的目標元素是被拖曳的元素。在這些事件中dragend最後觸發。此事件可冒泡，無法取消預設行為。
dragleave：這個事件在被拖得元素離開合法的可drop目標時觸發。這個事件的目標元素就是這個可drop目標。此事件可冒泡，無法取消預設行為。
dragexit：當一個可drop元素不再是拖曳操作最近的drop目標時觸發這個事件。這個事件的目標元素就是這個可drop元素。此事件可冒泡，不嫩取消預設行為。
drop：當在可drop目標上鬆開拖曳元素的指標裝置時觸發這個事件，該事件的目標元素是這個可drop目標。 drop事件在dragend事件觸發前觸發。這個事件可冒泡，可取消預設行為。
<!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')">
我可以拖动
</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>登入後複製
這些事件的事件物件包含滑鼠事件的事件物件的方法與屬性。之外還存在一個dataTransfer屬性
讓元素可拖曳
在HTML中預設可拖曳的元素只有image，link及被選取的文字。要讓其他元素可拖，需要做下面這三件事：
1.為元素設定一個draggable屬性，並且將這個屬性的值設為true
2.在這個元素上新增一個dragstart的事件監聽
3.在dragstart的事件監聽上透過event.DataTransfer.setData(type,value)設定拖曳資料。
<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
This text <strong>may</strong> be dragged.
</p>登入後複製
如果draggable屬性被禁止或設定為false，那麼這個元素就不能被拖曳。 draggable屬性可以在任何屬性上設定。當一個元素設定為可拖，在這個元素上點選或拖曳滑鼠，這個元素裡的文字或其他元素不會被選取。當使用者開始拖曳，dragstart事件會被觸發，在dragstart事件中，你能夠透過setData()指定拖曳數據，透過setDragImage()指定圖片回饋，以及透過設定effectAllowed屬性和dropEffect屬性指定拖曳效果。拖曳數據是必須指定的，但是圖片反饋是拖曳效果不是必須的
拖拽數據
#拖曳數據包含兩部分信息，分別是數據的類型和數據的值，資料的型別是字串，資料的值也是字串形式。 拖曳資料的類型有：text/plain,text/html,image/jpeg,text/uri-list等，也能夠自訂類型。
可以多次呼叫setData()方法設定多個拖曳資料。如下：
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是自訂類型。
如果透過這個方法設定新的類型的數據，那麼這個新的拖曳數據會位於拖曳數據列表的尾部，如果設定以及存在的類型的數據，那麼新的數據會覆蓋舊的數據。
透過getData()能夠得到指定類型的拖曳資料
透過clearData()能夠清除指定類型的拖曳資料
圖片回饋
圖片回饋並不是必須設定的，預設它是從拖曳目標上產生的一個半透明圖片，並且這個圖片在拖曳期間會跟著滑鼠移動。你能夠透過setDragImage(image,xOffect,yOffect)方法自訂圖片回饋。
setDragImage()接受三個參數，第一個參數表示圖片引用，第二個和第三個表示圖片左上角相對於滑鼠指標的位置。單位是像素
<!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')">
我可以拖动
</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>登入後複製
拖曳效果
透過設定effectAllowed和dropEffect可以指定拖曳效果
事件对象的dataTransfer属性
dataTransfer属性是一个DataTransfer对象，在这个属性中保存了拖拽操作过程中的数据，它可能保存一个或者多个数据项。这个属性是只读的。
dataTransfer属性中的标准属性
1.dropEffect
得到当前drag and drop操作的类型，或者设置给当前drag and drop 设置新的类型。这个属性可能取值是none，copy，move，link。这属性会影响拖拽过程中的鼠标的显示形式。
2.effectAllowed
这个属性用于指定运行的拖拽操作效果，可选的值有none，all，copy，move，link，copyLink，copyMove，linkMove。默认情况这个值是all，如果要设置这个属性的值就要在dragstart的事件处理程序里进行设置。
3.files
包含了在data transfer中的所有可用的本地文件列表，如果被拖拽操作没有涉及文件，那么它是一个空列表。
4.items
是一个包含了所有拖拽数据的列表。它是一个DataTransferItemList对象。
5.types
它是一个字符串数组，这个数组中包含在dragstart事件处理程序中设置的拖拽事件的类型，如果拖拽操作不存在数据，那么他得到一个空数组。
DataTransfer属性的标准方法
1.clearData(type):移除给定类型相关的拖拽数据。接受一个可选的参数，如果这个参数是空或者没有指定，那么移除所以类型的数据，如果指定的类型不存在或者data transfer中不包含数据，那么这个方法不会产生什么影响。
2.getData(type):得到指定类型的拖拽数据。如果指定类型的数据不存在或者data transfer中不包含数据， 得到一个空的字符串。
3.setData(type，value):设置给定类型的拖拽数据。接受两个参数，第一个参数是类型，第二个参数是指定类型的值。 如果这个类型的值不存在，那么在类型列表的最后添加一个新的格式，如果已经存在的,那么在相同的位置 存在的数据被替换.
4.setDragImage(image，xoffset，yoffset):接受三个参数，第一个参数是图片的引用，第二个和第三个参数是移动的图片的 左上角相对鼠标的位置。
DataTransferList对象
通过dataTransfer.items得到的值就是DataTransferList对象。
DataTransferList对象的属性
1.length:得到拖拽数据的数量
DataTransferList对象的方法
1.add()：向拖拽数据列表中添加一个新的拖拽数据，添加成功后返回这个新的拖拽数据。当添加一个文件到拖拽数据列表中，这个方法只接受一个文件对象作为参数。当添加一个给定 类型的字符串到拖拽数据列表中，这个方法接受两个参数，第一个参数是数据，第二个参数是类型。
2.remove(index):从拖拽数据列表中移除指定位置的拖拽数据。这个方法接受一个表示位置的参数，如果这个参数小于0或者大于拖拽数据列表的长度，拖拽数据列表不会发生改变。
3.clear():移除拖拽数据列表中所有的拖拽数据。不需要参数。
4.DataTransferItem(index):得到指定位置上的拖拽数据。接受一个表示位置的参数， 这个方法简写形式是数组索引。
DataTransferItem对象
dataTransfer.items中的每一项都是DataTransferItem对象。
DataTransferItem对象的属性
1.kind：得到拖拽数据的键，可能的值有file和string
2.type：得到拖拽数据的类型，是MINE type
DataTransferItem对象的方法
1.getAsFile():返回拖拽数据的文件对象。如果拖拽数据不是文件则返回null
2.getAsString(function):调用回调函数，这个回调函数将拖拽数据项的字符串形式作为它的参数
拖拽文件
要使文件能够被拖放的一个重要步骤是定义一个放置区域。并且为放置区域添加drop，dragover和dragend事件处理程序。
当为一个元素添加drop事件的处理程序，及在dragover事件处理程序中取消浏览器的默认行为，那么这个元素就是放置区域。
另外，在drag和drop操作结束之后，应用程序应该移除拖拽数据（可能是一个或者多个文件），数据的清理通常在 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>
登入後複製
例子一，访问文件名
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);
}
}
}登入後複製
例子二，阻止浏览器默认行为
function dragover_handler(ev) {
console.log("dragOver");
// Prevent default select and drag behavior
ev.preventDefault();
}登入後複製
例子三，清除数据
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();
}
}登入後複製
【相关推荐】
1. 免费h5在线视频教程
2. 20分鐘看懂html5 看看H5都有啥新功能
3. 教你如何實作一個H5微場景
#4. H5製作一個註冊頁面的程式碼實例
5. H5與傳統html的差異
6. #透過H5實作拍照功能的實例詳解
#
以上是HTML5 DragEvent介面的實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
