Drag da Drop HTML5

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

سحب وإفلات

السحب والإفلات (Drag و Drop) هو ميزة شائعة. يشير إلى أنك تستطيع سحب شيء وإفلاته في مكان آخر.

السحب والإفلات جزء من معيار HTML5: يمكن لكل عنصر أن يكون قابلًا للتشغيل.

دعم المتصفحات

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم السحب والإفلات بشكل كامل.

API
سحب وإفلات 4.0 9.0 3.5 6.0 12.0

مثال HTML للسحب والإفلات

إليك مثال بسيط عن السحب والإفلات:

مثال

<!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>

亲自试一试

قد يبدو هذا معقدًا قليلاً، لكن دعونا ندرس جميع أجزاء أحداث السحب والإفلات.

تعيين العنصر كقابل للتشغيل

أولاً: لجعل عنصر قابل للتشغيل، قم بتعيين خاصية draggable إلى true:

<img draggable="true">

محتويات السحب والإفلات - ondragstart وsetData()

ثم، يتم تحديد ما يحدث عند سحب العنصر.

في هذا المثال، تم استدعاء دالة drag(event) بواسطة خاصية ondragstart، لتعيين البيانات التي يتم سحبها.

طريقة setData() لـ dataTransfer تعين نوع البيانات والمقدار للبيانات المُسحوبة:

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

فى هذا المثال، نوع البيانات هو "text"، والقيمة هى id للعنصر القابل للتشغيل ("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")
  • 把被拖元素追加到放置元素中

更多实例

来回拖放图片

如何在两个

元素之间来回拖放图像：

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

亲自试一试