سحب وإفلات 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() لتحديد نوع البيانات والمقدار للبيانات القابلة للسحب:

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

في هذا المثال،نوع البيانات هو "text"،والقيمة هي id للمكون القابل للسحب ("drag1").

أين يتم سحبه - ondragover

يحدد حدث ondragover أين يمكن وضع البيانات المُسحبة.

بافتراض الافتراض، لا يمكن وضع البيانات/العناصر في عناصر أخرى. لتحقيق سحب وإفلات، يجب علينا منع هذا السلوك الافتراضي للعناصر.

تؤدي هذه المهمة إلى طريقة preventDefault() الخاصة بالحدث ondragover:

event.preventDefault()

الإجراءات بعد الإطلاق - ondrop

يحدث حدث drop عندما يتم إطلاق البيانات المُسحبة.

في المثال السابق، تم استدعاء دالة ondorp بواسطة خاصية ondrop، وهي دالة ondorp(event):

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

توضيح الكود:

  • استدعاء preventDefault() لمنع الطريقة الافتراضية للمعالجة الافتراضية للبيانات (سلوك الافتراضي للحدث drop هو فتح الروابط كرابط)
  • الحصول على البيانات المُسحبة من خلال طريقة getData() الخاصة بـ dataTransfer. هذه الطريقة ستعود ببيانات من نفس النوع التي تم تعيينها في setData().
  • البيانات المُسحبة هي id العنصر المُسحب ("drag1")
  • إضافة العنصر المُسحب إلى العنصر المُوضع

مزيد من الأمثلة

سحب الصورة

كيفية سحب الصورة بين عناصر <div> المختلفة:

يرجى سحب صورة CodeW3C.com إلى الشكل المربع.

جرب بنفسك