Drag and Drop ng HTML5
请把 CodeW3C.com 图片拖到矩形中。
Paglipat at Ilipat
Ang paglipat at ilipat (Drag and Drop) ay isang karaniwang katangian. Ito ay nangangahulugan na ikaw ay kukuha ng isang bagay at ililipat ito sa iba't ibang posisyon.
Ang paglipat at ilipat ay bahagi ng standar na HTML5: anumang elemenyo ay puwedeng ilihis.
Suporta ng Browser
Ang mga numero sa talahanayan ay inukitang ang unang bersyon ng browser na ganap na sumusuporta sa paglipat at ilipat.
| API | |||||
| Paglipat at Ilipat | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Paglipat at Ilipat ng Halimbawa
Ito ay isang simpleng halimbawa ng paglipat at ilipat:
Mga 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 na kumplikado ito, ngunit pagsusuri natin ang lahat ng iba't ibang bahagi ng pangyayari ng paglipat at ilipat.
Itakda ang elemenyo na puwedeng ilihis
Unang: Upang itakda ang isang elemenyo na puwedeng ilihis, ilagay ang atributo na draggable sa true:
<img draggable="true">
Mga nililipat at nilagay sa lugar - ondragstart at setData()
Pagkatapos, itutakda ang mga nangyayari kapag ang elemenyo ay nililipat.
Sa nakaraang halimbawa, ang atrubuto na ondragstart ay tinawag ang function na drag(event), na nagtatakda kung anong datos ang ililipat.
Ang paraan na setData() ng dataTransfer ay nagtatakda ng uri ng datos at ang halaga ng naililipat na datos:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
Sa halimbawa na ito, ang uri ng datos ay "text" at ang halaga ay ang id ng elemenong puwedeng ilihis ("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")
- 把被拖元素追加到放置元素中
