تشارك هذه المقالة عرض رمز سحب النافذة المنبثقة الأصلية للرجوع إليه. المحتوى المحدد كما يلي
صورة التكاثر:
رمز التنفيذ:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> تنقل نافذة البوب </title> <style> *{margin: 0 ؛ padding: 0 ؛} .box {position: appolut #001C67 ؛ الخلفية: #} .move {الموضع: مطلق ؛ العرض: 100px ؛ الارتفاع: 100px ؛ أعلى: 100px ؛ اليسار: 150px ؛ الحدود: 1px صلبة #000 ؛}. 30px ؛ Top: 0px ؛ اليمين: 0px ؛ الخلفية: أحمر ؛ محاذاة النص: الوسط ؛ خط خط: 30px ؛} </style> <script> window.onload = function () {var omove = document.getElementById ('move') ؛ // drag omove.onmousedown = fndown ؛ // إغلاق var oclose = document.getElementById ('Close') ؛ Oclose.onclick = function () {document.getElementById ('box'). style.display = 'none' ؛ }} function fndown (event) {event = event || window.event ؛ var odrag = document.getElementById ('box') ، // عندما يضغط المؤشر على المسافة بين المؤشر واللوحة هي disx = event.clientx-odrag.offsetleft ، disy = event.clienty-odrag.offsett ؛ // move document.onmousemove = function (event) {event = event || window.event ؛ var l = event.clientx-disx ، t = event.clienty-disy ، // أقصى اليسار ، القيمة العلوية LeftMax = (document.documentElement.clientwidth || document.body.clientwidth) -odrag.offsetwidth ، topmax = (document.documentElement.clientheight إذا (l <0) l = 0 ؛ if (l> leftMax) l = LeftMax ؛ إذا (t <0) t = 0 ؛ if (t> topmax) t = topmax ؛ odrag.style.left = l+'px' ؛ odrag.style.top = t+'px' ؛ } // refer the mouse document.onmouseup = function () {document.onmousemove = null ؛ document.onmouseup = null ؛ }} </script> </head> <body> <div id = "box"> <div id = "move"> منطقة السحب </div> <div id = "close"> x </viv> </viv> </body> </html>النقاط الرئيسية التي يجب ملاحظة :
1.Fent ، أي قضايا التوافق
2. عند النقر فوق الماوس ، يجب أولاً تحديد المسافة بين الماوس واللوحة.
3. يجب أن تحكم على المسافة بين النافذة المنبثقة ومنطقة المتصفح بأكملها ، ولا تدع النافذة المنبثقة تنفد من المنطقة خارج المتصفح.
4. حرر الماوس وإلغاء ربط الحدث ، وإلا سيكون هناك أخطاء.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.