يستغرق الأمر 5 دقائق لمعرفة السحب والإسقاط لـ html5، بالإضافة إلى ترتيب أحداث المراقبة الأخرى والتنفيذ.
التعريف والاستخدامسيتم تشغيل الأحداث التالية أثناء عملية السحب والإفلات:
تشغيل حدث على هدف السحب (العنصر المصدر):
الأحداث التي يتم تشغيلها عند تحرير الهدف:
يدعم Internet Explorer 9+ وFirefox وOpera وChrome وSafari السحب.
ملاحظة: لا يدعم Safari 5.1.2 السحب؛ عند سحب عنصر، يتم تشغيل حدث ondragover كل 350 مللي ثانية.
الأمثلة هي كما يلي:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-scale=1.0> <meta http-equiv=X-UA - المحتوى المتوافق=ie=edge> <title>مثال موجز للسحب والإسقاط لمدة 5 دقائق</title> <style> #draggable { width: 200px height: 20px؛ محاذاة النص: المركز؛ الخلفية: أبيض؛ } .dropzone { العرض: 200px؛ الخلفية: blueviolet؛ 10px; .addEventListener(dragstart, function (event) { console.log('==========dragstart بدء السحب ========= يتم تنفيذ السحب مرة واحدة فقط'); // احفظ مرجع العنصر المسحوب (المرجع) Dragged = events.target; // اجعله شفافًا events.target . style.opacity = .5; }, false); /* يتم تشغيل حدث السحب عند سحب العنصر المستهدف*/ document.addEventListener(drag, function (event) { // console.log('=========drag====== سيستمر السحب في المراقبة حتى يتم إسقاط العنصر' }); أحداث تشغيل العنصر */ document.addEventListener(dragover, function (event) { // console.log('==========dragover========== سيتم الاستماع دائمًا عند السحب، حتى يتم إسقاط العنصر')؛ // منع الإجراء الافتراضي لتمكين الإسقاط events.preventDefault(); }, false); document.addEventListener(dragenter, function (event) { console.log('==========dragenter يسحب العنصر إلى العنصر الهدف==========يتوافق) to drawleave '); // قم بتمييز العقدة المستهدفة عندما يدخل العنصر القابل للسحب إلى منطقة الإسقاط if (event.target.className == dropzone) { events.target.style.background = purple } }, false; document.addEventListener(dragleave, function (event) { console.log('========== يسحب السحب العنصر بعيدًا عن العنصر المستهدف==========يتوافق مع Dragenter') // عندما يغادر العنصر المسحوب العقدة المستهدفة القابلة للإسقاط، قم بإعادة تعيين خلفيته if (event.target.className == dropzone) { events.target.style.background = } }, false document.addEventListener(drop, function (حدث ) { console.log('=========drop drop element========== يتم تنفيذ السحب مرة واحدة فقط، ويتم تشغيله قبل السحب'); // منع الإجراءات الافتراضية (مثل الفتح روابط لبعض العناصر) events.preventDefault(); // انقل العنصر المسحوب إلى عقدة منطقة الإسقاط المحددة if (event.target.className == dropzone) { events.target.style.background = ; جر)؛ events.target.appendChild(dragged); } }, false document.addEventListener(dragend, function (event) { console.log('========== نهاية السحب= ===== يتم تنفيذ السحب مرة واحدة فقط'); // إعادة تعيين الشفافية events.target.style.opacity = }, false); </script></head><body> <div class=dropzone> < معرف div = قابل للسحب Draggable=true ondragstart=event.dataTransfer.setData('text/plain',null)> هذا هو DIV الذي يمكن سحبه </div> </div> <div class=dropzone></div> <div class= منطقة الإسقاط </div> <div class=dropzone></div></body></html>ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.