واجهة برمجة تطبيقات سحب وإفلات HTML
في HTML ، يمكن سحب أي عنصر وإسقاطه.
مثال
اسحب صورة W3Schools إلى المستطيل.
السحب والإفلات
السحب والإفلات ميزة شائعة جدًا. إنه عندما "تمسك" بشيء ما وتسحبه إلى مكان مختلف.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم ميزة "السحب والإفلات" بشكل كامل.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 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 ()
بعد ذلك ، حدد ما يجب أن يحدث عند سحب العنصر.
في المثال أعلاه ، ondragstartتستدعي السمة وظيفة ، سحب (حدث) ، تحدد البيانات المراد سحبها.
الطريقة dataTransfer.setData()تحدد نوع البيانات وقيمة البيانات المسحوبة:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
في هذه الحالة ، يكون نوع البيانات "نصًا" والقيمة هي معرف العنصر القابل للسحب ("السحب 1").
أين تسقط - ondragover
يحدد ondragoverالحدث مكان إسقاط البيانات المسحوبة.
بشكل افتراضي ، لا يمكن إسقاط البيانات / العناصر في عناصر أخرى. للسماح بالإسقاط ، يجب أن نمنع المعالجة الافتراضية للعنصر.
يتم ذلك عن طريق استدعاء event.preventDefault()التابع لحدث ondragover:
event.preventDefault()
هل قطرة - قطرة
عند إسقاط البيانات المسحوبة ، يقع حدث الإفلات.
في المثال أعلاه ، تستدعي السمة ondrop دالة ، drop (حدث):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
وأوضح الكود:
- Call PreventionDefault () لمنع المتصفح الافتراضي من معالجة البيانات (الافتراضي مفتوح كارتباط عند الإفلات)
- احصل على البيانات المسحوبة باستخدام طريقة dataTransfer.getData (). ستعيد هذه الطريقة أي بيانات تم تعيينها لنفس النوع في طريقة setData ()
- البيانات المسحوبة هي معرّف العنصر المسحوب ("drag1")
- قم بإلحاق العنصر المسحوب بعنصر الإسقاط
مزيد من الأمثلة
مثال
كيفية سحب (وإفلات) صورة ذهابًا وإيابًا بين عنصري <div>: