مدونة إحترف برمجة المواقع مع الأخ برحاب زكرياء

الأحد، 1 أكتوبر 2017

الدرس 07 : خاصية السحب و الإفلات في HTML5

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

بإمكانك إدراج الأكواد الغير قابلة لنشر بتحويله عبر محول الأكواد لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى" عبّر عن تعليقكالإبتسامات

التسميات

إتصل بنا
كن صديقًا لنا