HTML5 Drag & Drop API
السحب والإفلات (Drag & drop) هو مفهوم قوي لواجهة المستخدم مما يجعل من السهل سحب العناصر وإعادة ترتيبها وحذفها بمساعدة الماوس.
Drag & Drop Element
لتحقيق وظيفة السحب والإفلات باستخدام HTML4 التقليدي ، سيتعين على المطورين إما استخدام برمجة JavaScript معقدة أو أطر عمل JavaScript أخرى مثل jQuery وما إلى ذلك.
لكن مع HTML5 تتيح ميزة السحب والإفلات للمستخدم سحب عنصر وإفلاته في مكان آخر.
مثال للتوضيح:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.contentBox {
max-width: 300px;
height: 200px;
border: 5px dashed gray;
background: #ffffda;
text-align: center;
margin: 20px 0;
color: #4b4b4b;
padding: 10px;
}
.contentBox p {
position: absolute;
left: 80px;
font-size: 20px;
font-weight: bold;
}
.contentBox img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h2>Drag And Drop Example</h2>
<div id="contentBox" class="contentBox" ondrop="drop(event);" ondragover="drag(event);">
<p>Drop image here!</p>
<!--Dropped image here-->
</div>
<img src="image.png" id="first_drag" draggable="true" ondragstart="dragStart(event);" width="200" height="200" alt="Image">
<script>
function dragStart(ev) {
// Sets the operation allowed for a drag source
ev.dataTransfer.effectAllowed = "move";
// Sets the value and type of the dragged data
ev.dataTransfer.setData("Text", ev.target.getAttribute("id"));
}
function drag(ev) {
// Prevent the browser default handling of the data
ev.preventDefault();
ev.stopPropagation();
}
function drop(ev) {
// Cancel this event for everyone else
ev.stopPropagation();
ev.preventDefault();
// Retrieve the dragged data by type
var data = ev.dataTransfer.getData("Text");
// Append image to the drop box
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
Drag & Drop Example
Drop image here!
💡 من الممكن أن يكون الكود السابق معقد إلى حدًا ما بالنسبة لك! لكن دعنا نوضح كل جزء بشكل منفصل، لتفهم كل شئ.
كيفية جعل العنصر قابل للسحب draggable؟
لجعل عنصر قابل للسحب ، أضف سمة draggable للعنصر بقيمة “true“:
<img src="image_laptop.png" draggable="true" alt="Image laptop">
ondragstart Attribute
بعد ما تجعل العنصر قابل للسحب، يجب عليك تحديد ما يجب أن يحدث عند سحب العنصر؟
في المثال السابق، تستدعي السمة ondragstart دالة dragStart(event) ، تحدد البيانات المراد سحبها:
<img src="image_laptop.png" draggable="true" ondragstart="dragStart(event);" alt="Image Laptop">
setData() Method
تحدد طريقة ()dataTransfer.setData نوع وقيمة البيانات المسحوبة:
function dragStart(ev) {
// Sets the value and type of the dragged data
ev.dataTransfer.setData("Text", ev.target.getAttribute("id"));
}
ondragover Attribute
تحدد سمة ondragover مكان إسقاط البيانات المسحوبة.
بشكل افتراضي ، لا يمكن إسقاط البيانات أو العناصر في عناصر أخرى وللسماح بالإفلات ، يجب علينا منع المعالجة الافتراضية للعنصر عن طريق استدعاء طريقة ()event.preventDefault لسمة أو حدث الـ ondragover، كالتالى:
event.preventDefault();
ondrop Attribute
عند إسقاط البيانات المسحوبة ، يقع حدث drop.
كما في المثال السابق، تستدعي السمة ondrop دالة drop(event):
function drop(ev) {
// Cancel this event for everyone else
ev.stopPropagation();
ev.preventDefault();
// Retrieve the dragged data by type
var data = ev.dataTransfer.getData("Text");
// Append image to the drop box
ev.target.appendChild(document.getElementById(data));
}
مثال أخر على السحب والإفلات
فى هذا المثال يمكنك سحب الصورة من إطار لإطار:
<div id="first_contentBox" class="contentBox" ondrop="drop(event);" ondragover="drag(event);">
<p>Drop image here!</p>
<img src="setup_image.png" id="first_drag" draggable="true" ondragstart="dragStart(event);" width="200" height="200" alt="Setup Image">
<!--Dropped image here-->
</div>
<div id="second_contentBox" class="contentBox_second" ondrop="drop(event);" ondragover="drag(event);">
<p>Drop image here!</p>
<!--Dropped image here-->
</div>
<script>
function dragStart(ev) {
// Sets the value and type of the dragged data
ev.dataTransfer.setData("Text", ev.target.getAttribute("id"));
}
function drag(ev) {
// Prevent the browser default handling of the data
ev.preventDefault();
}
function drop(ev) {
// Cancel this event for everyone else
ev.stopPropagation();
ev.preventDefault();
// Retrieve the dragged data by type
var data = ev.dataTransfer.getData("Text");
// Append image to the drop box
ev.target.appendChild(document.getElementById(data));
}
</script>
Drag & Drop Between Frames
Drop image here!
Drop image here!
Drag and Drop Events
يوفر لك الجدول التالي نظرة عامة موجزة عن جميع أحداث السحب والإفلات:
الحدث (Event) | الوصف |
---|---|
ondragstart | يعمل عندما يبدأ المستخدم في سحب عنصر. |
ondragenter | يعمل عندما يتم نقل عنصر قابل للسحب لأول مرة إلى موضع الإسقاط. |
ondragover | يعمل عندما يسحب المستخدم عنصرًا فوق موضع الإسقاط. |
ondragleave | يعمل عندما يسحب المستخدم عنصرًا خارج موضع الإفلات. |
ondrag | يعمل عندما يسحب المستخدم عنصرًا إلى أي مكان (يعمل باستمرار). |
ondrop | يعمل عندما يسقط المستخدم عنصرًا في موضع الإسقاط بنجاح. |
ondragend | يعمل عند اكتمال إجراء السحب، سواء كان ناجحًا أم لا. لا يتم تشغيل هذا الحدث عند سحب ملف إلى المتصفح من سطح المكتب. |
dataTransfer Attributes
يوفر لك الجدول التالي نظرة عامة موجزة عن جميع سمات كائن dataTransfer:
السمة (attribute) | الوصف |
---|---|
dataTransfer.setData(format, data) | يضيف البيانات المحددة. |
dataTransfer.getData(format) | إرجاع البيانات المحددة. |
dataTransfer.clearData ( [ format ] ) | يزيل بيانات التنسيقات المحددة. |
dataTransfer.types | تُرجع قائمة DOMStringList التي تسرد التنسيقات التي تم تعيينها في حدث dragStart. |
dataTransfer.files | تُرجع قائمة الملفات للملفات التي يتم سحبها (إن وجدت). |
dataTransfer.setDragImage(element, x, y) | يستخدم العنصر المحدد لتحديث ملاحظات السحب ، واستبدال أي ملاحظات محددة مسبقًا. |
dataTransfer.addElement(element) | يضيف العنصر المحدد إلى قائمة العناصر المستخدمة لتقديم ملاحظات السحب. |
dataTransfer.dropEffect [ = value ] | تُرجع نوع العملية المحددة حاليًا + يمكن تعيين هذه السمة لتغيير العملية المختارة. |
dataTransfer.effectAllowed [ = value ] | تُرجع أنواع العمليات المسموح بها + يمكن تعيين هذه السمة لتغيير العمليات المسموح بها. |
دعم المتصفحات لعناصر drag & drop
المتصفح | Firefox | Chrome | Internet Explorer | Safari | Opera |
من بداية الإصدار | 3.5 | 4.0 | 9.0 | 6.0 | 12.0 |
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!