يوجد في جافاسكربت events مثل onDragStart, onDragOver للتحكم في حركة العنصر أو الملف أثناء سحبه وأفلاته ويتم السحب بالماوس بالضغط المستمر على العنصر أثناء السحب لحين إفلاته في منطقة إلإسقاط, لاحظ المثال التالي:
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();// تعطيل التصرف الأفتراضي لهذا الحدث
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
// هنا وعند بدء السحب نقوم بحفظ معرف العنصر بإسم ما
}
function drop(ev) {
// نستلم الملف عند إسقاطه
ev.preventDefault(); // تعطيل التصرف الأفتراضي لهذا الحدث
var data = ev.dataTransfer.getData("text"); // نحفظ بيانات العنصر المسحوب في متغير
ev.target.appendChild(document.getElementById(data)); // نضيف العنصر الى منطقة الاسقاط
}
</script>
</head>
<body>
<!-- هنا نعرف منطقة الإسقاط -->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<!-- لابد من تفعيل الخاصية على العنصر المراد سحبه draggable-->
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.
التعليقات