سحب وإفلات في 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

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

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

يؤدي method preventDefault() للحدث ondragover إلى تنفيذ هذه المهمة:

event.preventDefault();

إجراء الرفع - ondrop

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

في المثال السابق، يتم استدعاء function ondrop(event) من prop ondrop:

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

توضيح الكود:

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

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

سحب الصور ذهابًا وإيابًا

كيفية سحب الصورة بين عناصر <div> الثنائية:

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

جربها بنفسك