HTMLالموسوعةواجهات برمجة تطبيقات HTML

54- واجهة برمجة تطبيقات السحب والإفلات (Drag and Drop API) في HTML

تسمح واجهة برمجة التطبيقات هذه بتمكين عناصر HTML من إمكانية السحب والإفلات. حيث يمكن للمستخدمين سحب العناصر ونقلها إلى مواقع مختلفة داخل الصفحة، أو حتى إلى نوافذ أو تطبيقات أخرى.

دعم المتصفحات لواجهه برمجة تطبيقات السحب والإفلات (Drag and Drop API)

توضح الأرقام في الجدول أدناه أول إصدار من المتصفحات المختلفة الذي يدعم واجهة برمجة تطبيقات السحب والإفلات بشكل كامل:

**المتصفحالإصدار**
**Chrome4.0**
**Firefox9.0**
**Internet Explorer5.5**
**Opera12.0**
**Safari6.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>

جعل عنصر قابلًا للسحب في واجهة برمجة تطبيقات HTML السحب والإفلات

الخطوة الأولى لجعل عنصر قابلاً للسحب هي إضافة السمة draggable إليه وقيمتها true. هذه السمة تخبر المتصفح أن هذا العنصر يمكن للمستخدم سحبه إلى أماكن أخرى.

<img draggable="true">

تحديد البيانات المراد نقلها أثناء السحب باستخدام ondragstart و setData()

بعد جعل العنصر قابلاً للسحب، نحتاج إلى تحديد البيانات التي ينبغي نقلها أثناء السحب. نستخدم السمة ondragstart لاستدعاء تابع يقوم بتحديد هذه البيانات.

في المثال السابق، كان التابع drag(event) هو المسؤول عن تحديد البيانات المراد نقلها باستخدام الطريقة dataTransfer.setData(). تعمل هذه الطريقة على تعيين نوع البيانات وقيمة البيانات التي سيتم نقلها أثناء السحب.

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

في هذه الحالة، نوع البيانات هو “text” والقيمة هي معرف العنصر القابل للسحب وهو “drag1”. وهذا يعني أن المتصفح سينقل معرف العنصر (“drag1”) كبيانات أثناء عملية السحب والإفلات.


تحديد منطقة الإسقاط باستخدام ondragover

يستخدم حدث ondragover لتحديد المنطقة التي يمكن إسقاط العنصر المسحوب فيها.

في المتصفحات، السلوك الافتراضي هو عدم السماح بإسقاط العناصر داخل عناصر أخرى. لذلك، لكي نسمح بالإسقاط، يجب علينا منع هذا السلوك الافتراضي باستخدام الطريقة event.preventDefault() داخل تابع الحدث ondragover.

event.preventDefault()

تنفيذ عملية الإسقاط باستخدام ondrop

عند إسقاط العنصر المسحوب في منطقة الإسقاط، يحدث حدث drop. في المثال السابق، تم استخدام السمة ondrop لاستدعاء تابع drop(event) لتنفيذ عملية الإسقاط.

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

شرح الكود:

  1. ev.preventDefault():
    • تستدعي هذه الطريقة لمنع السلوك الافتراضي للمتصفح عند إسقاط البيانات، والذي عادةً ما يكون فتح البيانات كرابط.
  2. var data = ev.dataTransfer.getData(“text”);
    • تسترجع هذه الطريقة البيانات المنقولة أثناء السحب، باستخدام نوع البيانات “text” الذي تم تحديده في التابع drag(event).
  3. ev.target.appendChild(document.getElementById(data));
    • تأخذ هذه الطريقة البيانات المسترجعة (data)، والتي تحتوي على معرف العنصر المسحوب، وتقوم بإضافته كعنصر فرعي إلى عنصر منطقة الإسقاط (ev.target).

بهذا الشكل، يتم نقل العنصر المسحوب إلى منطقة الإسقاط عند حدوث حدث drop.

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى