JS 드래그 및 자주 묻는 질문
1703 단어 JS 학습
JS 드래그:
웹 페이지든 qq 로그인 상자든 모두 드래그 기능이 있는데 어떻게 드래그를 실현합니까?1. 원리 드래그의 원리는 간단합니다. 그리고 마우스 클릭에서div까지의 고정된 수평거리disX와 마우스 클릭에서div까지의 수직거리disY고정은 변하지 않습니다.2. 관련된 세 가지 이벤트를 끌어당기기 Onmousedown 저장 거리 Onmousemove는 거리에 따라 div의 최신 위치를 계산하고 Onmouseup 마우스를 들어올린다.드래그 흔히 볼 수 있는 문제 드래그 문제 1: 마우스 움직임이 빨라 작은 네모를 그립니다.해결 방법: onmousemove () 와 onmouseup () 이벤트를 무한대document에 추가합니다.
끌어당기는 문제 2: 경계 판단: 해결 방법: 경계의 임계값을 설정하여 해결한다.Clientwidth와clientheight 4.전체 코드:
Document
window.onload = function()
{
var oDiv = document.getElementById('div1');
var disX = 0;
var disY = 0; // ：
oDiv.onmousedown = function(ev)
{
var oEvent = ev || event;
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev)
{
var oEvent = ev || event;
var l = oEvent.clientX - disX ;
var t = oEvent.clientY - disY ;
//
if(l<=0)
{
l = 0;
}
else if(l >= document.documentElement.clientWidth - oDiv.offsetWidth )
{
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(t<=0)
{
t = 0;
}
else if(t >= document.documentElement.clientHeight - oDiv.offsetHeight )
{
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
}
document.onmouseup = function()
{
document.onmousemove = null;
document.onmouseup = null; // ；
}
}
document.addEventListener
}
좋은 웹페이지 즐겨찾기
