التعليق: اتصل على PreventDefault () لتجنب المعالجة الافتراضية للمتصفح للبيانات (يتم فتح السلوك الافتراضي لأحداث الإسقاط في نموذج الارتباط) ويتم الحصول على البيانات التي تم سحبها من خلال طريقة datatransfer.getData (النص). يمكن للأصدقاء المهتمين الرجوع إليها.
التأثير الأصلي
التأثير بعد السحب
الرمز كما يلي
[شفرة]
<! doctype html>
<html>
<head>
<type type = "text/css">
#div1 ، #div2
{تعويم: اليسار ؛ العرض: 100px ؛ الارتفاع: 35 بكسل ؛ الهامش: 10px ؛ الحشو: 10px ؛ الحدود: 1 بكسل Solid #AAAAA ؛}
</style>
<script type = "text/javaScript">
وظيفة السماح (EV)
{
ev.preventDefault () ؛
}
وظيفة السحب (EV)
{
ev.datatransfer.setData ("text" ، ev.target.id) ؛
}
انخفاض الوظيفة (EV)
{
ev.preventDefault () ؛
var data = ev.datatransfer.getData ("text") ؛
ev.target.appendChild (document.getElementById (data)) ؛
}
</script>
</head>
<body>
<img src = "/i/w3school_logo_black.gif" draggable = "true" onDragStart = "Drag (event)"/>
<div ondrop = "drop (event)" ondragover = "allowdrop (event)">
</div>
<div ondrop = "drop (event)" ondragover = "allowdrop (event)"> </viv>
</body>
</html>
[/شفرة]
قد يبدو الأمر معقدًا بعض الشيء ، لكن يمكننا دراسة الأجزاء المختلفة من حدث السحب والإفلات بشكل منفصل.
تعيين عناصر على السحب والانهيار
أولاً ، لجعل العنصر قابل للسحب ، قم بتعيين الخاصية القابلة للسحب على صواب:
<img draggable = "true" />
ماذا تسحب - OndragStart و SetData ()
ثم ، حدد ما يحدث عند سحب العنصر.
في المثال أعلاه ، تستدعي خاصية OnDragStart وظيفة ، السحب (الحدث) ، والتي تحدد البيانات التي يتم سحبها.
تقوم طريقة datatransfer.setData () بتعيين نوع البيانات وقيمة البيانات التي تم سحبها:
وظيفة السحب (EV)
{
ev.datatransfer.setData ("text" ، ev.target.id) ؛
}
في هذا المثال ، يكون نوع البيانات نصًا والقيمة هي معرف العنصر القابل للسحب (drag1).
أين تضع - Ondragover
يحدد حدث OnDragover مكان وضع البيانات.
بشكل افتراضي ، لا يمكن وضع البيانات/العناصر في عناصر أخرى. إذا كنت بحاجة إلى تعيين السماح بالتنسيب ، فيجب علينا حظر التعامل الافتراضي للعناصر.
يتم ذلك عن طريق استدعاء طريقة event.preventDefault () لحدث OnDragover:
Event.PreventDefault ()
جعل الموضع - ONDROP
يحدث حدث إسقاط عند وضع بيانات الإسقاط.
في المثال أعلاه ، تستدعي خاصية ONDROP وظيفة ، إسقاط (حدث):
انخفاض الوظيفة (EV)
{
ev.preventDefault () ؛
var data = ev.datatransfer.getData ("text") ؛
ev.target.appendChild (document.getElementById (data)) ؛
}
شرح الرمز:
استدعاء CALL PRESEDEFAULT () لتجنب المعالجة الافتراضية للمتصفح للبيانات (يتم فتح السلوك الافتراضي لأحداث الإسقاط في نموذج الارتباط) للحصول على البيانات التي تم سحبها من خلال طريقة datatransfer.getData (النص). تقوم هذه الطريقة بإرجاع أي مجموعة بيانات إلى نفس النوع في طريقة setData (). البيانات التي تم سحبها هي معرّف العنصر السحب (DRAG1) لإلحاق العنصر الموسع إلى عنصر الموضع (عنصر الهدف)