В этой статье используется демо-код перетаскивания нативного всплывающего окна для вашей ссылки. Конкретный контент заключается в следующем
Изображение воспроизведения:
Код реализации:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> Pop Window Drag </title> <style> *{Margin: 0; Padding: 0;} .box {Положение: Absolute; Width: 400px; высота: 300px; top: 100px; слева: 100px; #001C67; фон: #} .move {положение: абсолютно; ширина: 100px; высота: 100px; top: 100px; слева: 150px; граница: 1px solut #000;} .move: hover {cursor: Move;} .close {позиция: Absolute; ширина: 30px; Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота: Высота 30px; top: 0px; справа: 0px; фон: red; text-align: center; line-hight: 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.offsettop; // Перемещение 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. 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'; } // Выпустить Mouse Document.onmouseUp = function () {document.onmouseMove = null; document.onmouseup = null; }} </script> </head> <body> <div id = "box"> <div id = "move"> raight </div> <div id = "close"> x </div> </div> </body> </html>Основные моменты, чтобы отметить :
1. Э.
2. При нажатии на мышь вы должны сначала определить расстояние между мышью и панелью.
3. Вы должны оценить расстояние между всплывающим окном и всей площадью браузера, и не позволяйте всплывающему окну выходить из области за пределами браузера.
4. Отпустите мышь и раскрыть событие, иначе будут ошибки.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.