خاصية السحب و الإفلات في HTML5

 خاصية السحب و الإفلات في HTML5
يعتبر السحب و الإفلات خاصية مهمة من خصائص HTML5 .أي عندما تقوم بسحب عنصر معين من مكان و إفلاته في مكان آخر .

يمكن استخدام خاصية السحب و الإفلات مع أي عنصر في صفحة HTML5 .


المتصفحات الداعمة

متوافق مع متصفح سفاري غير متوافق مع متصفح اوبرا متوافق مع متصفح انترنت اكسبلورر متوافق مع متصفح فايرفوكس متوافق مع متصفح جوجل كروم

تدعم المتصفحات Internet Explorer 9 و Firefox و Chrome و Safari 5 خاصية السحب و الإفلات .

ملاحظة : خاصية السحب و الإفلات غير مدعومة من Safari 5.1.2 .

مثال عن السحب و الإفلات

الكود التالي هو مثال بسيط حول السحب و الإفلات :

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

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

function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</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 تم استدعاء الدالة  drag(event)و التي تقوم بتحديد البيانات التي سيتم سحبها .
قمنا أيضاً باستخدام الطريقة dataTransfer.setData() و التي تقوم بتحديد نوع البيانات و قيمة نوع البيانات أيضاً :

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


أين سيتم الإفلات  – ondragover

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

event.preventDefault()


تطبيق عملية الافلات

عندما يتم سحب عنصر و من ثم إفلاته عندها سيبدأ حدث الإفلات .
في المثال السابق استدعت اللاحقة ondrop الدالة drop(event) :

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


شرح الكود :

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