اليوم سوف نحل بعض المشكلات في النموذج الأولي من آخر عملية جر. دعونا نرى ما هي المشاكل؟
أرفق رمز JavaScript من العدد السابق لتسهيل الجميع لعرض المشكلة.
<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 ؛ disy = oevent.clienty - odiv.offsettop ؛ odiv.onmousemove = function (ev) {var oevent = ev || حدث؛ Odiv.Style.left = oevent.clientx - disx+'px' ؛ Odiv.Style.top = oevent.clienty - disy+'px' ؛ } ؛ odiv.onmouseup = function () {odiv.onmousemove = null ؛ odiv.onmouseup = null ؛ } ؛ } ؛ } ؛ </script>1. إذا كان الماوس يتحرك بشكل أسرع الآن ، فستجد أن الماوس يخرج من هذا Div ، ولن يتبع Div الماوس في هذا الوقت.
ثم لماذا تحدث هذه المشكلة؟
السبب في الواقع بسيط للغاية. نضيف حدث Mousemove إلى Div ، لذلك بمجرد انحراف الماوس من Div ، لن يتم تشغيل Mousemove في هذا الوقت.
الحل: يتم تحميل الحدث على المستند ، لأن الماوس لا يزال في الصفحة بغض النظر عن ما ، سيتم تشغيل MouseMove بغض النظر عن السبب ، لذلك سيكون سريعًا.
ثم نقوم بتعديل الكود وفقًا لذلك.
<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 ؛ disy = oevent.clienty - odiv.offsettop ؛ // على مستند تحميل الحدث. حدث؛ Odiv.Style.left = oevent.clientx - disx+'px' ؛ Odiv.Style.top = oevent.clienty - disy+'px' ؛ } ؛ odiv.onmouseup = function () {document.onmousemove = null ؛ odiv.onmouseup = null ؛ } ؛ } ؛ } ؛ </script>ثم يمكن حل هذه المشكلة.
2. دعونا نرى ما هي المشاكل التي لا تزال موجودة. على الرغم من أن مشكلة السحب بسرعة تم حلها ، عندما نقلت الماوس إلى هذا الموقف
الآن يمكنك أن ترى بوضوح أن الماوس ليس على div. إذا قمت برفع الماوس في هذا الوقت ، يمكنك أن ترى أنه سيتحرك بعد العودة. هذا خطأ آخر!
في الواقع ، هذا السؤال هو نفس السؤال أعلاه. لذلك من السهل جدًا حلها ، دعنا نضيف mouseup إلى المستند ، دعنا نجربها
document.onmouseup = function () {document.onmousemove = null ؛ document.onmouseup = null ؛ } ؛وبهذه الطريقة ، إذا انتقلت إلى الموضع الذي أنت عليه الآن ، فلن يكون هناك خطأ سابق ، ولن تكون هناك مشكلة في التحرك بسرعة. كل شيء طبيعي.
3. دعونا نلقي نظرة على مشكلات توافق المتصفح
في الواقع ، هناك مشكلة في الإصدار السفلي من متصفح Firefox
. كيف حدث ذلك؟ عند سحب المرة الأولى ، يكون ذلك صحيحًا. عندما تسحبه مرة واحدة ، اضغط وامتلكه وحركه ، ستجد أنه سيكون هناك ظل خلفه. ما الذي يحدث مع هذا؟
في الواقع ، فإن Firefox الذي نجره الآن هو عربات التي تجرها الدواب. فماذا لو أضفنا بعض المحتوى إلى div
ستجد أنه لا توجد مشكلة الآن.
لذلك تظهر حشرة Firefox فقط في Div الفارغة.
حل:
في الواقع ، الأمر بسيط للغاية. نحتاج فقط إلى حظر الحدث الافتراضي للمتصفح وإرجاع خطأ ؛ في onmousedown. لماذا تضيفه إلى onmousedown؟
يمكنك التفكير في أي حدث يبدأ السحب؟ يبدأ مع onmousedown. عندما يتم الضغط على الماوس ، يبدأ السحب. لذلك تحتاج إلى تحميل onmousedown.
في الواقع ، لقد أضافت فقط إعادة الجملة كاذبة ؛ منعت حشرة Firefox.
بهذه الطريقة ، بغض النظر عن كيفية تأخيرك ، لن تكون هناك مشكلة.
الرمز المرفق:
<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 ؛ disy = oevent.clienty - odiv.offsettop ؛ // على مستند تحميل الحدث. حدث؛ Odiv.Style.left = oevent.clientx - disx+'px' ؛ Odiv.Style.top = oevent.clienty - disy+'px' ؛ } ؛ document.onmouseup = function () {document.onmousemove = null ؛ document.onmouseup = null ؛ } ؛ العودة كاذبة } ؛ } ؛ </script>تم اكتمال البرنامج الآن ، ولكن لا تزال هناك بعض المشكلات في تجربة المستخدم.
على سبيل المثال ، إذا كان بإمكان المستخدم سحب هذا div من المتصفح ، فكيف يمكنه حله؟
ثم نضيف حكمًا. هذا بسيط للغاية ، إذا خرجت من اليسار
، هذا يساوي مباشرة 0 ، ولا يمكنه الخروج من اليسار. ثم الشيء نفسه صحيح أعلاه.
فكيف يمكننا منع أنفسنا من الخروج من اليمين؟ ؟ فقط ارسم صورة وجعلها واضحة. في الواقع ، يمكننا حسابه عن طريق طرح العرض المرئي للصفحة من Div.
ثم هذا هو ما يسمى القيمة القصوى. فقط تحكم إذا تجاوزت المسافة هذه القيمة القصوى ، فهي تساوي هذه القيمة القصوى. ثم ما يلي هو نفسه.
قم بإرفاق الكود الكامل:
<script type = "text/javaScript"> // اسحب وإسقاط Div فارغ. الإصدار المنخفض من firefox له نافذة bug. var disy = 0 ؛ odiv.onmousedown = function (ev) {var oevent = ev || حدث؛ disx = oevent.clientx - odiv.offsetleft ؛ disy = oevent.clienty - odiv.offsettop ؛ document.onmousemove = function (ev) {var oevent = ev || حدث؛ // قم بتخزين الموقع الحالي لـ div var odivleft = oevent.clientx - disx ؛ var odivtop = oevent.clienty - disy ؛ // اسحب من اليسار if (odivleft <0) {odivleft = 0 ؛ } آخر إذا (odivleft> document.documentElement.clientwidth - Odiv.OffSetWidth) {odivleft = document.documentElement.clientwidth - odiv.offsetwidth ؛ } if (odivtop <0) {odivtop = 0 ؛ } آخر إذا (odivtop> document.documentElement.clientheight - Odiv.offSetheight) {odivtop = document.documentElement.clientheight - odiv.offsetheight ؛ } odiv.style.left = odivleft + 'px' ؛ Odiv.Style.top = odivtop + 'px' ؛ } ؛ document.onmouseup = function () {document.onmousemove = null ؛ document.onmouseup = null ؛ } ؛ العودة كاذبة // حظر الحدث الافتراضي وحل علة Firefox} ؛ } ؛ </script>ثم السحب أكثر اكتمالا الآن. o (∩_∩) o