이 기사에서는 참조에 대한 기본 팝업 창 드래그 코드 데모를 공유합니다. 특정 내용은 다음과 같습니다
생식 이미지 :
구현 코드 :
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 팝 윈도우 드래그 </title> <style> *{마진 : 0; 패딩 : 0;} .box {위치 : 절대; 너비 : 400px; 상단 : 100px; 100px; #001c67; 배경 : #} .Move {위치 : 절대; 너비; 너비 : 100px; 높이 : 100px; 상단 : 100px; 왼쪽 : 150px; 경계 : 1px solid #000;}. 30px; 상단 : 0px; 오른쪽 : 0px; 배경 : 빨간색; 텍스트-정렬 : 중심; line-height : 30px;} </stryt> 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'; }} 함수 fndown (이벤트) {event = event || Window.event; var odrag = document.getElementById ( 'box'), // 커서가 커서와 패널 사이의 거리가 disx = event.clientx-odrag.offsetleft, disy = event.clienty-dodrag.offsetTop; // document.onmouseMove = function (event) {event = event || Window.event; var l = event.clientx-disx, t = event.clienty-disy, // 최대 왼쪽, 최상위 값 왼쪽 왼쪽 왼쪽 max = (document.documentElement.clientWidth || document.body.clientWidth) -odrag.offsetWidth, topmax = (document.documentElement.clientHeight.body.clientHeight) -OdfETheight; 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'; } // 마우스 문서를 릴리스합니다 .OnMouseUp = function () {document.onmouseMove = null; document.onmouseup = null; }} </script> </head> <body> <div id = "box"> <div id = "move"> 드래그 영역 </div> <div id = "close"> x </div> </div> </body> </html>주목할만한 요점 :
1. 이벤트, 즉 호환성 문제
2. 마우스를 클릭 할 때 먼저 마우스와 패널 사이의 거리를 결정해야합니다.
3. 팝업 창과 전체 브라우저 영역 사이의 거리를 판단해야하며 브라우저 외부의 영역에서 팝업 창을 실행하지 않도록해야합니다.
4. 마우스를 풀고 이벤트를 풀면 버그가 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.