السحب شيء رائع جدا. يمكنك النقر فوق كائن ، وأمسك بالماوس ، ونقل الماوس إلى منطقة أخرى ، وإطلاق زر الماوس لوضع الكائن هنا.
هذه حالة بسيطة:
جزء HTML: لاحظ أنه يجب تعريف عناصر السحب على الإطلاق ، وهذا هو الموضع = مطلق ؛
نسخة الكود كما يلي: <div style = "الموضع: مطلق ؛ الارتفاع: 100px ؛ العرض: 100px ؛ الخلفية: أحمر"> </div>
<script src = "dome.js"> </script>
JS Part (Dome.JS):
var eventUtil = {// احصل على الحدث والهدف getEvent: function (event) {refere event؟ الحدث: window.event ؛ } ، getTarget: function (event) {return event.target || Event.Srcelement ؛ } ، // إضافة حدث الاستماع AddEvent: function (element ، type ، handler) {if (element.addeventListener) {element.addeventListener (type ، handler ، false) ؛ } آخر إذا (element.attachevent) {element.attachevent ("on" + type ، handler) ؛ }} ، // تسجيل الخروج من حدث الاستماع delevent: function (element ، type ، handler) {if (element.removeeventListener) {element.removeeventListener (type ، handler ، false) ؛ } if if (element.detachevent) {element.detachevent ("on" + type ، handler) ؛ }}} var dragdrop = function () {// العلامة لتحديد ما إذا كان عنصر DOM يجري سحب var dragging = null ؛ // الفرق بين الركن الأيسر العلوي لعنصر DOM ومؤشر الماوس هو Diffx = 0 ؛ Diffy = 0 ؛ وظيفة Geallevent (event) {event = eventUtil.getEvent (event) ؛ var target = eventUtil.getTarget (event) ؛ Switch (event.type) {case "mousedown": // حدد ما إذا كانت فئة عنصر DOM تحتوي على السمة القابلة للسحب إذا (target.className.indexof ("draggable")> -1) {dragging = target ؛ diffx = event.clientx - target.offSetLeft ؛ diffy = event.clienty - target.offsettop ؛ } استراحة؛ حالة "mousemove": if (dragging! = null) {target.style.left = event.clientx - diffx + "px" ؛ target.style.top = event.clienty - Diffy + "px" ؛ } استراحة؛ حالة "mouseup": dragging = null ؛ استراحة؛ }} return {enable: function () {eventutil.addevent (وثيقة ، "mousedown" ، handevent) ؛ EventUtil.Addevent (وثيقة ، "Mousemove" ، مقبض) ؛ EventUtil.Addevent (وثيقة ، "mouseup" ، مقبض) ؛ } ، disable: function () {eventutil.delevent (وثيقة ، "mousedown" ، مقبض) ؛ EventUtil.Delevent (وثيقة ، "mousemove" ، مقبض) ؛ EventUtil.Delevent (وثيقة ، "mouseup" ، مقبض) ؛ }}} () ؛ dragdrop.enable () ؛ما يجب شرحه هنا هو Diffx و Diffy ، والتي تمثل الفرق بين الزاوية اليسرى العلوية من العنصر ومؤشر الماوس.
Diffx = x إحداثيات الماوس - الإزاحة من كائن العنصر
diffy = y إحداثيات الماوس - Offsettop لكائن العنصر
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.