JavaScript Reference Manual
/ ondragstart 事件
ondragstart 事件
ondragstart 事件
實(shí)例
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> .droptarget { float: left; width: 100px; height: 35px; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; } </style> </head> <body> <p>在兩個(gè)矩形框中來(lái)回拖動(dòng) p 元素:</p> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> <p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="dragtarget">拖動(dòng)我!</p> </div> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <p style="clear:both;"><strong>注意:</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的瀏覽器不支持 drag 事件。</p> <p id="demo"></p> <script> function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); document.getElementById("demo").innerHTML = "開(kāi)始拖動(dòng) p 元素"; } function dragEnd(event) { document.getElementById("demo").innerHTML = "完成 p 元素的拖動(dòng)。"; } function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
本文底部包含了更多實(shí)例。
定義和用法
ondragstart 事件在用戶開(kāi)始拖動(dòng)元素或選擇的文本時(shí)觸發(fā)。
拖放是 HTML5 中非常常見(jiàn)的功能。 更多信息可以查看我們 HTML 教程中的 HTML5 拖放。
注意: 為了讓元素可拖動(dòng),需要使用 HTML5draggable 屬性。
提示: 鏈接和圖片默認(rèn)是可拖動(dòng)的,不需要 draggable 屬性。
在拖放的過(guò)程中會(huì)觸發(fā)以下事件:
- 在拖動(dòng)目標(biāo)上觸發(fā)事件 (源元素):
- ondragstart - 用戶開(kāi)始拖動(dòng)元素時(shí)觸發(fā)
- ondrag - 元素正在拖動(dòng)時(shí)觸發(fā)
- ondragend - 用戶完成元素拖動(dòng)后觸發(fā)
- 釋放目標(biāo)時(shí)觸發(fā)的事件:
- ondragenter - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件
- ondragover - 當(dāng)某被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件
- ondragleave - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象離開(kāi)其容器范圍內(nèi)時(shí)觸發(fā)此事件
- ondrop - 在一個(gè)拖動(dòng)過(guò)程中,釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件
瀏覽器支持
注意: 在拖動(dòng)元素時(shí),每隔 350 毫秒會(huì)觸發(fā) ondragover 事件。

語(yǔ)法
HTML 中:
<element ondragstart="myScript">嘗試一下
JavaScript 中:
object.ondragstart=function(){myScript};嘗試一下
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("dragstart", myScript);嘗試一下
注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
技術(shù)細(xì)節(jié)
是否支持冒泡: | Yes |
---|---|
是否可以取消: | Yes |
事件類型: | DragEvent |
支持的 HTML 標(biāo)簽: | All HTML elements |
更多實(shí)例
實(shí)例
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> .droptarget { float: left; width: 100px; height: 35px; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; } </style> </head> <body> <p>在兩個(gè)矩形框中來(lái)回拖動(dòng) p 元素:</p> <div class="droptarget"> <p draggable="true" id="dragtarget">拖動(dòng)我!</p> </div> <div class="droptarget"></div> <p style="clear:both;"><strong>注意:</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的瀏覽器不支持 drag 事件。</p> <p id="demo"></p> <script> /* 拖動(dòng)時(shí)觸發(fā)*/ document.addEventListener("dragstart", function(event) { //dataTransfer.setData()方法設(shè)置數(shù)據(jù)類型和拖動(dòng)的數(shù)據(jù) event.dataTransfer.setData("Text", event.target.id); // 拖動(dòng) p 元素時(shí)輸出一些文本 document.getElementById("demo").innerHTML = "開(kāi)始拖動(dòng) p 元素."; //修改拖動(dòng)元素的透明度 event.target.style.opacity = "0.4"; }); //在拖動(dòng)p元素的同時(shí),改變輸出文本的顏色 document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // 當(dāng)拖完p元素輸出一些文本元素和重置透明度 document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "完成 p 元素的拖動(dòng)"; event.target.style.opacity = "1"; }); /* 拖動(dòng)完成后觸發(fā) */ // 當(dāng)p元素完成拖動(dòng)進(jìn)入droptarget,改變div的邊框樣式 document.addEventListener("dragenter", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "3px dotted red"; } }); // 默認(rèn)情況下,數(shù)據(jù)/元素不能在其他元素中被拖放。對(duì)于drop我們必須防止元素的默認(rèn)處理 document.addEventListener("dragover", function(event) { event.preventDefault(); }); // 當(dāng)可拖放的p元素離開(kāi)droptarget,重置div的邊框樣式 document.addEventListener("dragleave", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; } }); /*對(duì)于drop,防止瀏覽器的默認(rèn)處理數(shù)據(jù)(在drop中鏈接是默認(rèn)打開(kāi)) 復(fù)位輸出文本的顏色和DIV的邊框顏色 利用dataTransfer.getData()方法獲得拖放數(shù)據(jù) 拖拖的數(shù)據(jù)元素id(“drag1”) 拖拽元素附加到drop元素*/ document.addEventListener("drop", function(event) { event.preventDefault(); if ( event.target.className == "droptarget" ) { document.getElementById("demo").style.color = ""; event.target.style.border = ""; var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } }); </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
相關(guān)頁(yè)面
HTML 教程: HTML5 拖放
HTML 參考手冊(cè): HTML draggable 屬性