오늘 우리는 마지막 드래그의 프로토 타입에서 몇 가지 문제를 해결할 것입니다. 문제가 무엇인지 봅시다.
모든 사람이 문제를 볼 수 있도록 이전 문제의 JavaScript 코드를 첨부했습니다.
<script type = "text/javaScript"> wind var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || 이벤트; Disx = Oevent.clientx -Odiv.offsetleft; disy = oevent.clienty -odiv.offsettop; odiv.onmouseMove = function (ev) {var oevent = ev || 이벤트; odiv.style.left = Oevent.clientx -Disx+'PX'; odiv.style.top = oevent.clienty -disy+'px'; }; odiv.onmouseup = function () {odiv.onmouseMove = null; odiv.onmouseup = null; }; }; }; </스크립트>1. 마우스가 지금 더 빨리 움직이면 마우스 가이 div에서 나오고 DIV가 마우스를 따르지 않을 것입니다.
그렇다면 왜이 문제가 발생합니까?
그 이유는 실제로 매우 간단합니다. MouseMove 이벤트를 DIV에 추가하므로 마우스가 DIV에서 벗어나면 MouseMove가 더 이상 트리거되지 않습니다.
솔루션 : 이벤트가 문서에로드됩니다. 마우스가 여전히 페이지에 있으므로, 무엇이든지 MouseMove가 트리거되므로 빠르게 진행됩니다.
그런 다음 그에 따라 코드를 수정합니다.
<script type = "text/javaScript"> wind var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || 이벤트; Disx = Oevent.clientx -Odiv.offsetleft; disy = oevent.clienty -odiv.offsettop; // 이벤트로드 문서에서 nomousEmove = function (ev) {var oevent = ev || 이벤트; odiv.style.left = Oevent.clientx -Disx+'PX'; odiv.style.top = oevent.clienty -disy+'px'; }; odiv.onmouseup = function () {document.onmouseMove = null; odiv.onmouseup = null; }; }; }; </스크립트>이 문제를 해결할 수 있습니다.
2. 어떤 문제가 있는지 보자. 빠르게 드래그하는 문제가 해결되었지만 마우스를이 위치로 옮길 때
이제 마우스가 div에 있지 않음을 분명히 알 수 있습니다. 이 시간에 마우스를 들어 올리면 돌아온 후에 움직일 것임을 알 수 있습니다. 이것은 또 다른 버그입니다!
실제로이 질문은 위의 질문과 동일합니다. 그래서 해결하기가 매우 간단합니다. 문서에 마우스 업을 추가합시다.
document.onmouseup = function () {document.onmouseMove = null; document.onmouseup = null; };이런 식으로, 당신이 지금 당신이 지금 당신의 위치로 이동한다면, 이전 버그는 없을 것이며, 빠르게 움직이는 데 아무런 문제가 없습니다. 모든 것이 정상입니다.
3. 브라우저 호환성 문제를 살펴 보겠습니다.
실제로, Firefox 브라우저의 하위 버전에는 그러한 문제가 있습니다.
. 어떻게 일어 났습니까? 처음 드래그하면 맞습니다. 한 번 드래그하면 누르고 잡고 움직일 수 있습니다. 그 뒤에 그림자가있을 것입니다. 이것으로 무슨 일이 일어나고 있습니까?
사실, 우리가 지금 드래그하고있는 Firefox는 버기입니다. 그래서 우리가 div에 콘텐츠를 추가하면 어떻게해야합니까?
지금은 문제가 없다는 것을 알게 될 것입니다.
따라서 Firefox 버그는 빈 Div에만 나타납니다.
해결책:
사실, 그것은 매우 간단합니다. 브라우저의 기본 이벤트를 차단하고 False를 반환하면됩니다. Onmousedown에서. 왜 OnMousedown에 추가합니까?
어떤 이벤트가 시작되는지 생각할 수 있습니까? 그것은 onmousedown으로 시작합니다. 마우스를 누르면 드래그가 시작됩니다. 따라서 Mousedown을로드해야합니다.
사실, 그것은 단지 문장을 추가로 추가했습니다. Firefox 버그를 차단했습니다.
이렇게하면 어떻게 지연하든 문제가 없습니다.
첨부 된 코드 :
<script type = "text/javaScript"> wind var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || 이벤트; Disx = Oevent.clientx -Odiv.offsetleft; disy = oevent.clienty -odiv.offsettop; // 이벤트로드 문서에서 nomousEmove = function (ev) {var oevent = ev || 이벤트; odiv.style.left = Oevent.clientx -Disx+'PX'; odiv.style.top = oevent.clienty -disy+'px'; }; document.onmouseup = function () {document.onmouseMove = null; document.onmouseup = null; }; 거짓을 반환합니다. }; }; </스크립트>이 프로그램은 이제 완료되었지만 여전히 사용자 경험에 문제가 있습니다.
예를 들어, 사용자가 브라우저 에서이 DIV를 드래그 할 수 있다면 어떻게 해결할 수 있습니까?
그런 다음 우리는 판단을 추가하고 있습니다. 왼쪽에서 나가면 이것은 매우 간단합니다.
, 그것은 0과 직접적이며 왼쪽에서 나올 수 없습니다. 그런 다음 위의 사실입니다.
그렇다면 어떻게 우리가 자신이 오른쪽에서 나가는 것을 막을 수 있습니까? ? 그림을 그려서 명확하게하십시오. 실제로, 우리는 div에서 페이지의 시각적 폭을 빼서 계산할 수 있습니다.
그러면 이것은 소위 최대 값입니다. 이동 거리 가이 최대 값을 초과하는지 판단하면이 최대 값과 같습니다. 그런 다음 다음은 동일합니다.
전체 코드 첨부 :
<script type = "text/javaScript"> // 비어있는 div를 끌고 떨어 뜨립니다. Firefox의 낮은 버전은 bug window.onload = function () {var odiv = document.getElementById ( "div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || 이벤트; Disx = Oevent.clientx -Odiv.offsetleft; disy = oevent.clienty -odiv.offsettop; document.onmouseMove = function (ev) {var oevent = ev || 이벤트; // div var odivleft = oevent.clientx -disx의 현재 위치를 저장합니다. var odivtop = oevent.clienty- disy; // if (odivleft <0) {odivleft = 0; } else if (odivleft> document.DocumentElement.clientWidth- Odiv.offsetWidth) {odivleft = document.DocumentElement.ClientWidth -Odiv.offsetWidth; } if (odivtop <0) {odivtop = 0; } else if (odivTop> document.DocumentElement.ClientHeight- Odiv.offSetheight) {odivtop = document.documentElement.ClientHeight -Odiv.offSetheight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onmouseup = function () {document.onmouseMove = null; document.onmouseup = null; }; 거짓을 반환합니다. // 기본 이벤트를 차단하고 Firefox 버그를 해결합니다}; }; </스크립트>그러면 드래그가 더 완전합니다. o (∩_∩) o