شرح مفصل لحدث السحب والإفلات في HTML5 (السحب والإفلات)

يدعم Internet Explorer 9 و Firefox و Opera 12 و Chrome و Safari 5 السحب والإفلات.

 <! javaScript> تسمح بالدالة (ev.preventdefault) ev.datatransfer.getData (text) ؛ = Drop (event) ondragover = letherDrop (event)> div> <br/> <img id = drag1 src = http: //www.aseoe.com/statics/images /eoe/logo.png draggable = true ondragstart = drags (حدث)/> </body> </html>

بادئ ذي بدء ، من أجل سحب العنصر ، قم بتعيين الخاصية القابلة للسحب على صواب:

ثم يتم تحديد ما يحدث عند سحب العنصر.

في المثال أعلاه ، تستدعي خاصية OnDragStart وظيفة ، السحب (الحدث) ، والتي تحدد البيانات التي تم سحبها.

طريقة datatransfer.setData () قم بتعيين نوع البيانات وقيمة بيانات سحب البيانات:

 دالة السحب (ev) {ev.datatransfer.setData (text ، ev.target.id) ؛}

في هذا المثال ، يكون نوع البيانات نصًا ، والقيمة هي معرف (DRAG1) يمكنها سحب العنصر.

ينص حدث OnDragover على مكان وضع البيانات التي تم سحبها.

الافتراضي ، لا يمكن وضع البيانات/العناصر في عناصر أخرى. إذا كنت بحاجة إلى تعيين الموضع المسموح به ، فيجب علينا منع المعالجة الافتراضية للعناصر.

هذا هو استدعاء الحدث.

 Event.PreventDefault ()

عند وضع بيانات السحب ، يحدث حدث DROP.

في المثال أعلاه ، تدعو سمة ONDROP وظيفة ، DROP (الحدث):

 دالة (EV) {ev.preventDefault () ؛

اتصل بـ PreventDefault () لتجنب المعالجة الافتراضية للمتصفح للبيانات (يتم فتح السلوك الافتراضي لحدث DROP في رابط)

احصل على البيانات التي تم سحبها من خلال طريقة datatransfer.getData (النص). ستعود هذه الطريقة إلى أي بيانات من نفس النوع في طريقة setData ().

بيانات السحب هي معرف عنصر السحب (drag1)

عنصر السحب الإضافي لعنصر التنسيب (عنصر الهدف)

ما سبق هو جميع محتويات هذه المقالة.