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

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

12:26 م

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

الكاتب

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة،هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة

شكرا لك ولمرورك
الاشتراك في: تعليقات الرسالة (Atom)