HTML5 Drag and Drop

请把 CodeW3C.com 图片拖到矩形中。

Pagdudot-dudot

Ang pagdudot-dudot (Drag and Drop) ay isang karaniwang katangian. Ito ay tumutukoy sa pagkuha ng isang bagay at idudot ito sa iba't ibang posisyon.

Ang pagdudot-dudot ay bahagi ng standard na HTML5: anumang elemento ay maaari madudot.

Suporta ng Browser

Ang mga numero sa talahanayan ay nagtutukoy sa unang bersyon ng browser na ganap na sumusuporta sa pagdudot-dudot.

API
Pagdudot-dudot 4.0 9.0 3.5 6.0 12.0

Halimbawa ng HTML pagdudot-dudot

Ang sumusunod ay isang simpleng halimbawa ng pagdudot-dudot:

Halimbawa

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

亲自试一试

Maaring makikita itong napakalalim, ngunit sabihin namin na pag-aralan namin ang lahat ng iba't ibang bahagi ng mga pangyayari ng pagdudot-dudot.

Itakda ang elemento bilang maaari madudot

Unang sabi: Upang itakda ang isang elemento bilang maaari madudot, ilagay ang attribute na draggable bilang true:

<img draggable="true">

Mga nilalaman ng pagdugtung-dugtung - ondragstart at setData()

Pagkatapos, nagtatakda kung anong mangyayari kapag ang elemento ay idinudot.

Sa itaas na halimbawa, ang attribute na ondragstart ay tinawag ang function na drag(event), na nagtatakda ng anong datos ang idinudot.

Ang method na setData() ng dataTransfer ay nagtatakda ng uri ng datos at ang halaga ng napapalilipat na datos:

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

Sa kasong ito, ang uri ng datos ay "text" at ang halaga ay ang id ng napapalilipat na elemento ("drag1").

拖到何处 - ondragover

ondragover 事件规定被拖动的数据能够被放置到何处。

默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。

这个任务由 ondragover 事件的 event.preventDefault() 方法完成：

event.preventDefault()

进行放置 - ondrop

当放开被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

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

代码解释：

  • 调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开）
  • 通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素中

更多实例

来回拖放图片

如何在两个 <div> 元素之间来回拖放图像：

请把 CodeW3C.com 图片拖到矩形中。

亲自试一试