مبدأ السحب: في الواقع ، تظل المسافة بين الماوس والركن الأيسر العلوي دون تغيير. دعونا نلقي نظرة على الصورة أدناه. هذه النقطة الحمراء هي الماوس.
السحب في الواقع يعني حساب موضع كائن من خلال موضع الماوس. إنه بهذه البساطة ومتعمدة. فكيف تجد هذه المسافة؟ ؟
الفرق بين موضع الماوس وموضع الكائن هو تلك المسافة ، أليس كذلك؟ ثم يتكون هذا الخط القطري من خطوط أفقية ورأسية.
دعونا نرى كيف يتم الانتهاء من البرنامج.
<div id = "div1"> </viv>
في الواقع ، كان ما غيره هو الجزء العلوي الأيسر من Div ، ثم بدأ يتحرك. يجب أن يكون هناك وضع مطلق بهذه الطريقة ، أليس كذلك؟
<type type = "text/css"> #div1 {width: 200px ؛ الارتفاع: 200 بكسل ؛ الخلفية: أحمر. الموقف: مطلق ؛ } </style>فيما يلي بضع خطوات: 1. اضغط على الماوس 2. ارفع الماوس 3. حرك الماوس
<script type = "text/javaScript"> window.onload = function () {var odiv = document.getElementById ("div1") ؛ var disx = 0 ؛ var disy = 0 ؛ odiv.onmousedown = function (ev) {var oevent = ev || حدث؛ // متصفح متوافق disx = oevent.clientx - odiv.offsetleft ؛ // الموضع الأفقي هو موضع الماوس - موضع div disy = oevent.clienty - odiv.offsettop ؛ } ؛ odiv.onmousemove = function (ev) {var oevent = ev || حدث؛ Odiv.Style.left = oevent.clientx - disx+'px' ؛ // موقع الماوس الحالي - disx odiv.style.top = oevent.clienty - disy+'px' ؛ } ؛ } ؛ </script>تحدث إلى الصورة:
var odivleft = oevent.clientx - disx ؛ الرسم البياني واضح جدا
Mouseup دعونا لا نلقي نظرة على ما هو التأثير الآن. .
ستجد ظاهرة مثيرة للاهتمام للغاية. إذا لم أضغط على الماوس ، فسوف أتبعني. لماذا هذا؟ ؟ ؟
دعنا نلقي نظرة على Mousemove: لا أحد في JavaScript ينص على أنه يجب عليك الضغط على الماوس قبل أن تبدأ ، أليس كذلك؟ بغض النظر عما إذا كنت تضغط على الماوس أم لا ، فإن هذا mousemove يحدث طوال الوقت ، وبالتالي فإن المشكلة تأتي من هنا. قبل الضغط على الماوس ، يجب ألا يكون هناك استجابة عندما يتحرك الماوس عليه. عليك أن تضغط عليه للرد.
لذلك ، لا ينبغي إضافة هذا mousemove بمجرد إطلاقه ، ولكن يجب أن تنتظر حتى يتم الضغط على الماوس ثم أضف mousemove لرؤية الكود المعدل.
بالمناسبة ، تتم إضافة Mouseup ، وينعكس دوره في هذا الوقت. الوظيفة هي odiv.onmousemove = null ؛ قم بإزالة حدث Move ،
خلاف ذلك ، عندما يتم رفع الماوس الخاص بك ، سيظل الكائن يتبعك. odiv.onmouseup = null ؛ إذا لم يتبق عدم وجود قمامة ، فسيكون من غير المجدي رفع الماوس.
لنلقي نظرة على الكود المعدل:
<script type = "text/javaScript"> window.onload = function () {var odiv = document.getElementById ("div1") ؛ var disx = 0 ؛ var disy = 0 ؛ odiv.onmousedown = function (ev) {var oevent = ev || حدث؛ // متصفح متوافق disx = oevent.clientx - odiv.offsetleft ؛ // الموضع الأفقي هو موضع الماوس - موضع div disy = oevent.clienty - odiv.offsettop ؛ odiv.onmousemove = function (ev) {var oevent = ev || حدث؛ Odiv.Style.left = oevent.clientx - disx+'px' ؛ // موقع الماوس الحالي - disx odiv.style.top = oevent.clienty - disy+'px' ؛ } ؛ odiv.onmouseup = function () {odiv.onmousemove = null ؛ odiv.onmouseup = null ؛ // لم يتبق القمامة ، سيكون من غير المجدي رفع الماوس} ؛ } ؛ } ؛ </script>الآن قمنا بسحب وإسقاط بسيط ، بالطبع لا تزال هناك بعض المشكلات الصغيرة التي يجب حلها.
ولكن بغض النظر عن ماذا ، لدينا بالفعل النموذج الأولي السحب. سنقوم بحل بعض الأخطاء واحدة تلو الأخرى في العدد التالي.