Cet article partage la démonstration de code de glissement de fenêtre contextuelle native pour votre référence. Le contenu spécifique est le suivant
Image de reproduction:
Code d'implémentation:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> fenêtre pop glisser </ title> <style> * {margin: 0; padding: 0;} .box {position: absolue; width: 400px; height: 300px; top: 100px; gauche: 100px; border: 1px solide. # 001C67; arrière-plan: #} .move {position: absolue; largeur: 100px; hauteur: 100px; top: 100px; gauche: 150px; bordure: 1px solide # 000;} .move: hover {curseur: move;} .close {position: absolue; largeur: 30px; hauteur: 30px; top: 0px; droite: 0px; arrière-plan: rouge; text-adign: Center; line-height: 30px;} </ style> <script> window.onload = function () {var omove = document.getElementyId ('move'); // glisser omove.onmousedown = fndown; // clôture var oclose = document.getElementById ('close'); oclose.onclick = function () {document.getElementById ('box'). style.display = 'Aucun'; }} fonction fndown (event) {event = event || window.event; var odrag = document.getElementById ('box'), // Lorsque le curseur appuie sur la distance entre le curseur et le panneau est disx = event.clientx-odrag.offsetleft, disy = event.clienty-odrag.offSetTop; // déplacer document.onMouSemove = function (event) {event = event || window.event; var l = event.clientx-disx, t = event.clienty-disy, // maximum gauche, valeur supérieure LeftMax = (document.documentElement.clientWidth || document.body.clientwidth) -odrag.offsetwidth, topmax = (document.documentElement.clientHeight || Document.clientHeight) -odRag.offsheight; if (l <0) l = 0; if (l> LeftMax) l = LeftMax; if (t <0) t = 0; if (t> topmax) t = topmax; odrag.style.left = l + 'px'; odrag.style.top = t + 'px'; } // Libérez le document de souris.onMouseUp = function () {document.onMouseMove = null; document.onmouseUp = null; }} </ script> </ head> <body> <div id = "box"> <div id = "move"> glisser la zone </ div> <div id = "close"> x </div> </div> </ body> </html>Points principaux à noter :
1.Event, IE Problèmes de compatibilité
2. Lorsque vous cliquez sur la souris, vous devez d'abord déterminer la distance entre la souris et le panneau.
3. Vous devez juger de la distance entre la fenêtre contextuelle et toute la zone du navigateur, et ne laissez pas la fenêtre contextuelle sortir de la zone à l'extérieur du navigateur.
4. Libérez la souris et délier l'événement, sinon il y aura des bugs.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.