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

By



يعتبر السحب و الإفلات خاصية مهمة من خصائص 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() و ذلك لتجنب خاصية المتصفح الافتراضية .

ليست هناك تعليقات:

إرسال تعليق