
54- واجهة برمجة تطبيقات السحب والإفلات (Drag and Drop API) في HTML
تسمح واجهة برمجة التطبيقات هذه بتمكين عناصر HTML من إمكانية السحب والإفلات. حيث يمكن للمستخدمين سحب العناصر ونقلها إلى مواقع مختلفة داخل الصفحة، أو حتى إلى نوافذ أو تطبيقات أخرى.
دعم المتصفحات لواجهه برمجة تطبيقات السحب والإفلات (Drag and Drop API)
توضح الأرقام في الجدول أدناه أول إصدار من المتصفحات المختلفة الذي يدعم واجهة برمجة تطبيقات السحب والإفلات بشكل كامل:
**المتصفح | الإصدار** |
---|---|
**Chrome | 4.0** |
**Firefox | 9.0** |
**Internet Explorer | 5.5** |
**Opera | 12.0** |
**Safari | 6.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));
}
شرح الكود:
- ev.preventDefault():
- تستدعي هذه الطريقة لمنع السلوك الافتراضي للمتصفح عند إسقاط البيانات، والذي عادةً ما يكون فتح البيانات كرابط.
- var data = ev.dataTransfer.getData(“text”);
- تسترجع هذه الطريقة البيانات المنقولة أثناء السحب، باستخدام نوع البيانات “text” الذي تم تحديده في التابع
drag(event)
.
- تسترجع هذه الطريقة البيانات المنقولة أثناء السحب، باستخدام نوع البيانات “text” الذي تم تحديده في التابع
- ev.target.appendChild(document.getElementById(data));
- تأخذ هذه الطريقة البيانات المسترجعة (
data
)، والتي تحتوي على معرف العنصر المسحوب، وتقوم بإضافته كعنصر فرعي إلى عنصر منطقة الإسقاط (ev.target
).
- تأخذ هذه الطريقة البيانات المسترجعة (
بهذا الشكل، يتم نقل العنصر المسحوب إلى منطقة الإسقاط عند حدوث حدث drop
.