السحب والإفلات هو ميزة شائعة ، أي السحب إلى موضع آخر بعد كائن الالتقاط.
في HTML5 ، يعد السحب والإفلات جزءًا قياسيًا ، ويمكن سحب أي عنصر وإسقاطه.
Internet Explorer 9+ و Firefox و Opera و Chrome و Safari Support Dragging.
ملاحظة: Safari 5.1.2 لا يدعم السحب.مثال:
<! style> <script> function alowdrop (ev) {ev.preventDefault () ؛} دالة السحب (ev) {ev.datatransfer.setData (النص ، evraget.id) ؛ var data = ev.datatransfer.getData (text) ؛ = drag1 src = img /bg_1.jpg draggable = true OnDragStart = drag (event) width = 300px heig ht = 180px /> </body> </html>بادئ ذي بدء ، من أجل سحب العنصر ، قم بتعيين الخاصية القابلة للسحب على صواب: <img draggable = true>
ثم يتم تحديد ما يحدث عند سحب العنصر.
في المثال أعلاه ، تستدعي خاصية OnDragStart وظيفة ، السحب (الحدث) ، والتي تحدد البيانات التي تم سحبها.
طريقة datatransfer.setData () قم بتعيين نوع البيانات وقيمة بيانات سحب البيانات: دالة السحب (ev) {ev.datatransfer.setData (text ، ev.target.id) ؛}في هذا المثال ، يكون نوع البيانات نصًا ، والقيمة هي معرف (DRAG1) يمكنها سحب العنصر.
ينص حدث OnDragover على مكان وضع البيانات التي تم سحبها.الافتراضي ، لا يمكن وضع البيانات/العناصر في عناصر أخرى. إذا كنت بحاجة إلى تعيين الموضع المسموح به ، فيجب علينا منع المعالجة الافتراضية للعناصر.
هذا هو استدعاء طريقة Event.PreventDefault () لحدث OnDragover : Event.PreventDefault ()
عند وضع بيانات السحب ، يحدث حدث DROP.
في المثال أعلاه ، تدعو سمة ONDROP وظيفة ، DROP (الحدث):
دالة (EV) {ev.preventDefault () ؛شرح الرمز:
اتصل بـ PreventDefault () لتجنب المعالجة الافتراضية للمتصفح للبيانات (يتم فتح السلوك الافتراضي لحدث DROP في رابط)
احصل على البيانات التي تم سحبها من خلال طريقة datatransfer.getData (النص) . ستعود هذه الطريقة إلى أي بيانات من نفس النوع في طريقة setData ().
بيانات السحب هي معرف عنصر السحب (drag1)
عنصر السحب الإضافي لعنصر التنسيب (عنصر الهدف)
اسحب ذهابًا وإيابًا:إذا كنت ترغب في السحب ذهابًا وإيابًا في مكانين ، فما عليك سوى تعديل الكود أعلاه.
تغيير الرمز في الجسم:
<Body> <div id = div1 ondrop = drop (event) ondragover = letherDrop (event)> <img id = drag1 src = img/bg_1.jpg draggable = true vent) width = 300px height = 180ppx/> </viv> <div id = div2 ondrop = drop (event) ondragover = letmdrop (event)> </viv> </body>
ثم أضف#div2 إلى نمط النمط:
<النمط = text/css> div1 ، #div2 {width: 360px ؛هذا يمكن جره ذهابا وإيابا.
ما سبق هو كل محتويات هذا المقال.