HTML5 السحب وإسقاط وظيفة

السحب والإفلات جزء من معيار HTML5.

دعم المتصفح

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

عنصر السحب ، dragelement:

مكان العنصر ، dropelement:

1. إضافة الأحداث: ondargenter ، ondragover ، ondragleave ، ondragend ، ondrop

إنه مشابه لحوادث Mouser في التصنيف ، وهي غير مفهومة جيدًا.

1. السحب والإسقاط بين العناصر على الصفحة

دعنا نستخدم مثالًا صغيرًا أدناه ، يتم عرض السحب والإفلات بين DIV ، وكيف يتم تشغيل كل حدث:

 <! src = ../../jquery-1.8.3.js type = text/javascript charset = utf-8> </script> <script type = text/javaScript>/*** drag (سحب وإسقاط). HTML5 مكون قياسي. * يدعم المتصفح* Internet Explorer 9 و Firefox و Opera 12 و Chrome و Safari 5 يدعم السحب والإفلات. * / $ (fuins () {$ (#dragele) [0] .OndRagStart = function (event) {console.log (drawStart) ؛ event.datatransfer.setData (text ، event.target.id) ؛} ؛ /*؛ * * عند وضع بيانات السحب ، يحدث حدث DROP. p] +) ؛} * console.log (ondrop) ؛ ) .D (الطول)) ؛ ؛} $ (#Dropele) [0]. الرأس> <duction : 330px.

تحتاج إلى الانتباه إلى:

A. يجب على Ontragover تنظيم السلوك الافتراضي للحدث.

ب. يتم فتح السلوك الافتراضي لحدث DROP في رابط ، لذلك يحتاج أيضًا إلى منع سلوكه الافتراضي.

من الممكن أيضًا ملاحظة أنه عند السحب والإسقاط ، يحتوي الحدث على حدث. ، ونسخه.

فيما يلي طرق أخرى للكائن:

event.datatransfer:

العناصر = [كائن datatransferntemlist] drag_drop.html: 44

الملفات = [كائن FileList] drag_drop.html: 44

أنواع = نص/عادي drag_drop.html: 44

QuistalOwed = all drag_drop.html: 44

dropeffect = none drag_drop.html: 44

ClearTata = دالة cleanata () {[رمز أصلي]} drag_drop.html: 44

getData = fuory getData () {[رمز أصلي]} drag_drop.html: 44

setData = function setData () {[code]}} drag_drop.html: 44

setDragImage = وظيفة setDragimage () {[رمز أصلي]}

لقد استخدمت JS لطباعة جميع سماتها:

1. GetData ، تم استخدام أمثلة SetData في المثال أعلاه ، ClearData هو مسح بيانات الإعدادات.

2. تجدر الإشارة إلى أن الملفات المحددة في نظام التشغيل يتم سحبها إلى DIV.

3. يتم استخدام setDragimage (الصورة ، x ، y) لتعيين عروض التحرك مع الماوس أثناء حركة الماوس. يجب تعيين في DragStart.

4.

ما سبق هو كل محتويات هذا المقال.