السحب والإفلات هو ميزة شائعة ، أي السحب إلى موضع آخر بعد كائن الالتقاط.
في HTML5 ، يعد السحب والإفلات جزءًا قياسيًا ، ويمكن سحب أي عنصر وإسقاطه.
انقر أولاً على مثال صغير: قم بتنفيذ JavaScript عندما يبدأ المستخدم في سحب <p> عناصر
<p Draggable = true OnDragStart = myfunction (event)> اسحبني!
نصيحة: يتم سحب الروابط والصور افتراضيًا ولا تحتاج إلى خاصية قابلة للسحب.
التعريف والاستخدامسيتم تشغيل الأحداث التالية أثناء عملية السحب والإفلات:
Internet Explorer 9+ و Firefox و Opera و Chrome و Safari Support Dragging.
ملاحظة: لا يدعم Safari 5.1.2 السحب ؛
مثالانشر الرمز أولاً ، ثم اشرح واحدًا تلو الآخر:
<! الحدود: 1px Solid #Aaaaaa ؛} </style> </head> <body> <p> سحب IMG_W3Slogo.gif صورة إلى المربع المستطيل: </p> <div1 ondrop = drop (event) ondragover = lemtdrop (حتى t)> </div> <br> <IMG id = drag1 src = images/img_w3slogo. ev.preventDefalt () ؛} drag (ev) {ev.datatransfer.setData (text ، ev.target.id) ؛} drop (ev) {ev.preventDefault () ؛ ؛تأثير الصفحة قبل السحب هو:
دعونا نحلل معنى الكود التالي أدناه.
يمكن سحب العنصر وإسقاطهبادئ ذي بدء ، من أجل سحب العنصر ، قم بتعيين الخاصية القابلة للسحب على صواب:
<img draggable = true>ماذا تسحب ondragstart و setData ()
ثم يتم تحديد ما يحدث عند سحب العنصر.
في المثال أعلاه ، تستدعي خاصية OnDragStart وظيفة ، السحب (الحدث) ، والتي تحدد البيانات التي تم سحبها.
طريقة datatransfer.setData () قم بتعيين نوع البيانات وقيمة بيانات سحب البيانات:
دالة السحب (ev) {ev.datatransfer.setData (text ، ev.target.id) ؛}في هذا المثال ، يكون نوع البيانات نصًا ، والقيمة هي معرف (DRAG1) يمكنها سحب العنصر.
أين تضعهاينص حدث OnDragover على مكان وضع البيانات التي تم سحبها.
الافتراضي ، لا يمكن وضع البيانات/العناصر في عناصر أخرى. إذا كنت بحاجة إلى تعيين الموضع المسموح به ، فيجب علينا منع المعالجة الافتراضية للعناصر.
هذا هو استدعاء الحدث.
Event.PreventDefault ()وضع الموندروب
عند وضع بيانات السحب ، يحدث حدث DROP.
في المثال أعلاه ، تدعو سمة ONDROP وظيفة ، DROP (الحدث):
دالة (EV) {ev.preventDefault () ؛شرح الرمز:
نتائج التنفيذ كما هو موضح في الشكل:
كائن datatransferأثناء عملية السحب ، يمكننا استخدام كائن DataTransfer لنقل البيانات لإجراء عمليات أخرى على البيانات عند انتهاء عملية السحب.
سمة الكائن: وظيفة dragstart_handler (ev) {console.log (dragstart) = p1 draggable = true OnDragStart = DragStart_Handler (event) ؛> هذا العنصر قابل للرسوم حدد بيانات السحب دالة dragstart_handler (ev) {// إضافة بيانات السحب ev.datatransfer.setData (text/plain ، ev.target.id) ؛ ؛ حدد صورة السحب دالة DragStart_Handler (EV) {// قم بإنشاء صورة ثم استخدمها لصورة السحب. () ؛ حدد تأثير السحب وظيفة dragstart_handler (ev) {// اضبط تأثير السحب لنسخ ev.datatransfer.dropeffect = copy ؛} تحديد منطقة إسقاط وظيفة Dragover_handler (EV) {ev.preventDefault () ؛ العنصر إلى بيانات الهدف = ev.datatransfer.getData (text) ؛ div> </body> مشكلة سحب متصفح Firefoxلكن اذهب إلى هنا وابحث عن مشكلة في متصفح Firefox:
يستخدم سحب HTML5 PreventDefault لمنع صفحة POP -up من الظهور ، لكنها لا تعمل تحت Firefox؟
حل:
document.ondrop = function (event) {event.preventDefault () ؛أو للمثال أعلاه ، من الممكن أيضًا إضافة إلى طريقة OnDrop:
دالة (EV) {ev.preventDefault () ؛ما سبق هو كل محتويات هذا المقال.