التعليق: لقد كان دائمًا ما يريد مستخدمو الإنترنت معرفة ما إذا كانوا لا يستخدمون JavaScript لتحقيق تأثير السحب والإفلات. اليوم ، قام HTML5 بمقدمة مفصلة لك بعد ذلك. يمكن للأصدقاء الذين يحتاجون إلى معرفته أن يشير إليها.
في تطوير الويب ، نحتاج إلى استخدام JavaScript لتحقيق تأثير السحب والإفلات. اليوم دعنا ننفذها باستخدام HTML5:
دعونا نلقي نظرة على رمز HTML الأساسي أولاً:
<viv>
<p> اسحب المربعات الصفراء الصغيرة إلى صندوق أحمر كبير </p>
</div>
<div draggable = "true">
</div>
<viv>
</div>
تتم إضافة خاصية Draggable حديثًا بواسطة HTML5. لديها ثلاث قيم: صواب ، خطأ ، تلقائي. صحيح يتم سحبه ، خطأ غير مسموح به. يعتمد Auto على ما إذا كان متصفح المستخدم يدعمه. لمزيد من المعلومات ، يرجى الرجوع إلى الوثائق الرسمية.
أضف نمطًا صغيرًا:
<type type = "text/css">
#يسقط
{
العرض: 300 بكسل ؛
الارتفاع: 200 بكسل ؛
خلفية اللون: #ff0000 ؛
الحشو: 5 بكسل ؛
الحدود: 2px الصلبة #000000 ؛
}
#غرض
{
العرض: 100px ؛
الارتفاع: 100px ؛
خلفية اللون: #FFFF00 ؛
الحشو: 5 بكسل ؛
الهامش: 20 بكسل ؛
الحدود: 1 بكسل متقطع #000000 ؛
}
*[draggable = true] {
-الموز المستخدم: لا شيء ؛
-Khtml-User-Drag: Element ؛
المؤشر: تحرك.
}
*:-khtml-drag {
خلفية اللون: RGBA (238،238،238 ، 0.5) ؛
}
</style>
ثم دعونا نلقي نظرة على JavaScript:
وظيفة Listenevent (EventTarget ، EventType ، EventHandler) {
if (eventTarget.adDeventListener) {
EventTarget.AdDeventListener (EventType ، EventHandler ، false) ؛
} آخر إذا (EventTarget.attachevent) {
EventType = "on" + eventType ؛
EventTarget.attachevent (EventType ، EventHandler) ؛
} آخر {
EventTarget ["ON" + EventType] = EventHandler ؛
}
}
// إلغاء الحدث
وظيفة CancelEvent (الحدث) {
if (event.preventDefault) {
Event.PreventDefault () ؛
} آخر {
Event.ReturnValue = false ؛
}
}
// إلغاء الانتشار
وظيفة إلغاء propagation (الحدث) {
if (event.stopPropagation) {
event.stoppropagation () ؛
} آخر {
event.cancelBubble = true ؛
}
}
window.onload = function () {
var target = document.getElementById ("Drop") ؛
ListeNevent (Target ، "Dragenter" ، CancelEvent) ؛
ListeNevent (Target ، "Dragover" ، Dragover) ؛
ListeNevent (Target ، "Drop" ، Function (Evt) {
CancelPropagation (EVT) ؛
evt = evt || window.event ؛
evt.datatransfer.dropeffect = 'copy' ؛
var id = evt.datatransfer.getData ("text") ؛
Target.AppendChild (document.getElementById (id)) ؛
}) ؛
var item = document.getElementById ("item") ؛
item.setAttribute ("draggable" ، "true") ؛
ListeNevent (عنصر ، "dragstart" ، الدالة (evt) {
evt = evt || window.event ؛
evt.datatransfer.effectallyed = 'copy' ؛
evt.datatransfer.setData ("text" ، item.id) ؛
}) ؛
} ؛
وظيفة السحب (evt) {
if (evt.preventDefault) evt.preventDefault () ؛
evt = evt || window.event ؛
evt.datatransfer.dropeffect = 'copy' ؛
العودة كاذبة
}
من الكود أعلاه ، ننظر إلى أحداث السحب والإفلات المقدمة باستخدام مجموعة من HTML5 ، وننظر مباشرة إلى ما يلي:
DragStart
يبدأ حدث السحب.
يجر
أثناء عملية السحب.
Dragenter
السحب فوق الهدف. تستخدم لتحديد ما إذا كان الهدف سوف يقبل الانخفاض.
السحب
السحب أكثر من الهدف. تستخدم لتحديد التعليقات للمستخدم.
يسقط
يحدث انخفاض.
Dragleave
سحب أوراق الهدف.
جر
تنتهي عملية السحب.
تحديد الأحداث ذات الصلة لتنفيذ الوظيفة المطلوبة. لا يصعب فهم ما يلي JS.
يمكنك تجربة ذلك بنفسك. حاليًا ، يدعم الأفضل في الأوبرا ، لكن تأثير IE ليس جيدًا.
آمل أن يكون ذلك مفيدًا لتطوير الويب الخاص بك.