دورة HTML5 الدرس 06: خاصية السحب و الإفلات في HTML5
مرحبا بكم في
مدونة كيكو للمعلوميات اليوم أقدم لكم الدرس السادس من دورة 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>
جعل العناصر قابلة للسحب في HTML5
أول خطوة يجب أن
نتخذها هي جعل العنصر قابل للسحب ويمكن فعل ذلك من خلال اضافة اللاحقة draggable وإضافة القيمة لها true:
<img
draggable="true" />
استخدام الدوال ondragstart و set Data ()
بعد ما قمنا بجعل
العنصر قابل للسحب سنقوم الآن بتحديد ما سيحصل للعنصر عند سحبه.
في المثال السابق
ومن خلال 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() و ذلك لتجنب خاصية المتصفح الافتراضية .
0 تعليقات