드래그의 원리 : 실제로 마우스와 왼쪽 상단 모서리 사이의 거리는 변하지 않습니다. 아래 그림을 봅시다. 이 빨간 점은 마우스입니다.
드래그 드래그는 실제로 마우스의 위치를 통해 물체의 위치를 계산하는 것을 의미합니다. 그것은 단순하고 고의적입니다. 그렇다면이 거리를 어떻게 찾습니까? ?
마우스 위치와 물체 위치의 차이점은 그 거리입니다. 그런 다음이 대각선 선은 수평 및 수직선으로 구성됩니다.
프로그램이 어떻게 수행되는지 봅시다.
<div id = "div1"> </div>
사실, 그가 바꾸는 것은 div의 왼쪽 상단이었고, 그는 움직이기 시작했습니다. 이 경우 절대 포지셔닝이 있어야합니까?
<스타일 유형 = "text/css"> #div1 {너비 : 200px; 높이 : 200px; 배경 : 빨간색; 위치 : 절대; } </style>다음 단계는 다음과 같습니다. 1. 마우스를 누르십시오. 2. 마우스를 들어 올리십시오. 3. 마우스를 움직입니다.
<script type = "text/javaScript"> wind var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || 이벤트; // 브라우저 호환 DISX = OEVENT.CLIENTX- ODIV.OFFSETLEFT; // 수평 위치는 마우스 위치입니다 - div disy = oevent.clienty -Odiv.offsetTop의 위치; }; odiv.onmouseMove = function (ev) {var oevent = ev || 이벤트; odiv.style.left = Oevent.clientx -Disx+'PX'; // 현재 마우스 위치 -disx odiv.style.top = oevent.clienty -disy+'px'; }; }; </스크립트>사진과 대화하십시오 :
VAR ODIVLEFT = OEVENT.CLIENTX- DISX; 다이어그램은 매우 명확합니다
마우스 업은 현재 효과가 무엇인지 살펴 보지 않겠습니다. .
당신은 매우 흥미로운 현상을 찾을 것입니다. 마우스를 누르지 않으면 나를 따라갈 것입니다. 이게 왜? ? ?
MouseMove를 살펴 보겠습니다. JavaScript에 아무도 시작하기 전에 마우스를 누르지 말아야한다고 규정하지 않습니까? 마우스를 누르는 지 여부에 관계 없이이 마우스 맨은 항상 일어나고 있으므로 여기에서 문제가 발생합니다. 마우스를 누르기 전에 마우스가 움직일 때 응답이 없어야합니다. 당신은 그것을 눌러 반응해야합니다.
따라서이 MousEmove가 시작 되 자마자 추가해서는 안되지만 마우스를 누르기 전까지 기다린 다음 MouseMove를 추가하여 수정 된 코드를 확인해야합니다.
그건 그렇고, 마우스 업이 추가되고 현재 그의 역할이 반영됩니다. 함수는 odiv.onmousemove = null입니다. 이동 이벤트 제거,
그렇지 않으면, 마우스가 올라가면 물체가 여전히 당신을 따릅니다. odiv.onmouseup = null; 쓰레기가 남지 않으면 마우스를 들어 올리는 것은 쓸모가 없습니다.
수정 된 코드를 살펴 보겠습니다.
<script type = "text/javaScript"> wind var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || 이벤트; // 브라우저 호환 DISX = OEVENT.CLIENTX- ODIV.OFFSETLEFT; // 수평 위치는 마우스 위치입니다 - div disy = oevent.clienty -Odiv.offsetTop의 위치; odiv.onmouseMove = function (ev) {var oevent = ev || 이벤트; odiv.style.left = Oevent.clientx -Disx+'PX'; // 현재 마우스 위치 -disx odiv.style.top = oevent.clienty -disy+'px'; }; odiv.onmouseup = function () {odiv.onmouseMove = null; odiv.onmouseup = null; // 쓰레기가 남지 않으면 마우스를 들어 올리는 것은 쓸모가 없습니다}; }; }; </스크립트>이제 우리는 간단한 드래그 앤 드롭을했습니다. 물론 여전히 해결해야 할 작은 문제가 있습니다.
그러나 무엇이든, 우리는 이미 드래그 프로토 타입을 가지고 있습니다. 다음 호에서 일부 버그를 하나씩 해결할 것입니다.