JavaScript 드래그 앤 드롭 효과 구현 code_javascript 기술

페이지에 끌어서 놓기 기능을 추가하는 데에는 여러 가지 이유가 있으며, 그 중 가장 간단한 것은 데이터를 재구성하는 것입니다. 예를 들어, 사용자가 일련의 페이지 요소를 재구성할 수 있도록 하려면 각 요소 옆에 입력 또는 선택 구성 요소를 배치하여 요소 그룹을 끌어서 놓도록 만드는 것이 하나의 솔루션입니다. 대안. 또는 사용자가 이동할 수 있는 탐색 창을 웹 사이트에 두고 싶을 수도 있습니다. 드래그 앤 드롭을 사용하는 간단한 이유는 모두 가능하기 때문입니다!
웹페이지에 드래그 앤 드롭 효과를 구현하는 것은 그리 복잡하지 않습니다. 먼저 마우스의 위치를 ​​알고, 사용자가 요소를 클릭한 시기를 알아야 드래그를 시작할 준비가 되었음을 알 수 있으며, 마지막으로 요소를 이동해야 합니다.

마우스 움직임 캡처
첫 번째 단계에서는 마우스 좌표를 가져와야 합니다. 이 기능은 함수를 전달하고 document.onmousemove에 할당하여 수행할 수 있습니다.

코드

코드 복사 코드는 다음과 같습니다.

document.onmousemove = mouseMove ;
function mouseMove(ev) {
ev = ev || window.event;
var mousePos = mouseCoords(ev)
}
function mouseCoords(ev); (ev.pageX || ev.pageY) {
return {x:ev.pageX, y:ev.pageY}
}
return {
x:ev.clientX document.body. scrollLeft - document.body.clientLeft,
y:ev.clientY document.body.scrollTop - document.body.clientTop
}
}

먼저 설명이 필요합니다. 이벤트 객체. 마우스를 클릭하거나 키를 누르는 등 움직일 때마다 이벤트가 발생합니다. IE에서 이 이벤트는 전역적이며 window.event에 저장됩니다. Firefox 및 기타 브라우저의 경우 이 이벤트는 이 페이지 작업을 가리키는 모든 함수에 전달됩니다. 따라서 document.onmousemove가 마우스 이동 함수를 가리키도록 하고 마우스 이동 함수가 이벤트 객체를 가져옵니다.
위 코드에서 ev에는 모든 브라우저 환경의 이벤트 개체가 포함되어 있습니다. Firefox에서는 "||window.event"가 이미 이벤트를 포함하고 있으므로 무시됩니다. IE에서는 ev의 값이 비어 있으므로 해당 값을 window.event로 설정해야 합니다.
이 기사에서는 마우스 좌표를 여러 번 캡처해야 하므로 이벤트 매개변수가 하나 있는 mouseCoords 메서드를 작성했습니다.
IE와 다른 브라우저의 차이점에 대해 다시 한번 이야기해보겠습니다. Firefox 및 기타 브라우저는 event.pageX 및 event.pageY를 ​​사용하여 문서를 기준으로 한 마우스 위치를 나타냅니다. 500*500 크기의 창이 있고 창 중앙에 마우스가 있는 경우 pageX와 pageY의 값은 모두 250이 됩니다. 창을 500픽셀 아래로 스크롤하면 pageY 값은 750입니다.
반대로 Microsoft의 IE는 event.clientX와 event.clientY를 사용하여 현재 문서가 아닌 창을 기준으로 마우스의 위치를 ​​나타냅니다. 동일한 예에서 500x500 창 중앙에 마우스를 놓으면 clientX 및 clientY 값은 모두 250이 됩니다. 페이지를 아래로 스크롤하면 clientY는 현재 문서가 아닌 창을 기준으로 측정되므로 여전히 250입니다. 따라서 마우스 위치에 문서 문서 본문 영역의 scrollLeft 및 scrollTop 속성을 도입해야 합니다. 마지막으로 IE의 문서는 실제로 (0,0) 위치에 있지 않습니다. 문서 주위에는 작은(보통 2px) 테두리가 있습니다. document.body.clientLeft 및 document.body.clientTop에는 이 테두리의 너비도 포함됩니다. 마우스 위치에 도입해야 합니다.
다행히도 이제 mouseCoords 기능이 있으므로 더 이상 마우스 위치를 가져오는 것에 대해 걱정할 필요가 없습니다.

마우스 클릭 캡처
다음으로 마우스를 클릭한 시점과 떼는 시점을 알아야 합니다. 이 단계를 건너뛰면 마우스가 이러한 요소 위로 이동할 때마다 해당 요소를 드래그하는 효과가 발생하므로 짜증나고 직관에 어긋납니다.
여기에는 onmousedown과 onmouseup이라는 두 가지 도움이 되는 함수가 있습니다. 이전에는 document.onmousemove가 함수를 가리켰으므로 document.onmousedown과 document.onmouseup이 모두 함수를 가리켜야 하는 것이 논리적인 것처럼 보입니다. document.onmousedown이 함수를 가리키게 하면 마우스가 텍스트, 이미지, 표 등 요소를 클릭할 때 이 함수가 실행됩니다. 우리는 페이지의 특정 요소만 드래그 앤 드롭할 수 있기를 원하므로 다음 방법을 통해 이를 달성할 수 있습니다:

코드

코드 복사 코드는 다음과 같습니다.

document.onmouseup = mouseUp;
var dragObject = null;
object.onmousedown = function () {
dragObject = this
}
}
function mouseUp(ev) {
dragObject =
}


이제 클릭한 요소가 포함된 dragObject 변수가 생겼습니다. 마우스를 놓으면 dragObject가 비어 있게 설정되므로 dragObject가 비어 있지 않으면 드래그 작업을 수행해야 합니다.

요소 이동
이제 마우스 움직임과 클릭을 캡처하는 방법을 알았습니다. 다음으로 해야 할 일은 드래그하려는 요소를 이동하는 것입니다. 먼저, 요소를 페이지에서 원하는 위치로 정확하게 이동하려면 요소 스타일 시트의 위치 값이 절대값이어야 합니다. 즉, style.top 또는 style.left를 설정할 수 있습니다. 모든 마우스 움직임은 일반적으로 페이지의 왼쪽 상단을 기준으로 하기 때문입니다.
item.style.position='absolute'를 설정한 후에는 요소의 상단과 왼쪽 위치를 변경하여 요소를 움직여야 합니다!

코드

코드 복사 코드는 다음과 같습니다.

문서입니다. onmousemove = mouseMove ;
document.onmouseup = mouseUp;
var dragObject = null ;
var mouseOffset = null
function getMouseOffset(target, ev) {
ev || 이벤트;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x, y:mousePos.y - docPos.y}
}
function getPosition(e) {
var left = 0;
var top = 0
while(e.offsetParent) {
left = e.offsetLeft; >top = e.offsetTop;
e = e.offsetParent;
}
left = e.offsetLeft;
top = e.offsetTop
return {x:left, y:top };
}
function mouseMove(ev) {
ev = ev || window.event
var mousePos = mouseCoords(ev)
if (dragObject); .style.position = 'absolute';
dragObject.style.top = mousePos.y - mouseOffset.y;
dragObject.style.left = mousePos.x - mouseOffset.x; 🎜>}
}
function mouseUp() {
dragObject = null ;
}
function makeDraggable(item) {
if (!item) return
item; onmousedown = function (ev) {
dragObject = this ;
mouseOffset = getMouseOffset(this, ev);
return false ;
이러한 코드는 이전 예제를 기반으로 한 것입니다(이전 기사 참조). 이를 함께 사용하면 요소를 마음대로 이동할 수 있습니다.
요소를 클릭하면 또 다른 변수인 mouseOffset이 저장됩니다. mouseOffset에는 클릭한 요소의 위치 정보가 포함되어 있습니다. 20*20px 이미지가 있고 이미지 중간을 클릭하면 mouseOffset은 {x:10, y:10}이어야 합니다. 이미지의 왼쪽 상단 모서리를 클릭하면 mouseOffset은 {x:0, y:0}이어야 합니다. 마우스를 이동한 후의 위치정보로 사용합니다. 이 값을 저장하지 않으면 요소를 클릭하는 위치에 관계없이 마우스를 기준으로 한 요소의 위치가 동일합니다.
mouseOffset 함수는 다른 함수 getPosition을 사용합니다. getPosition의 목적은 문서 문서를 기준으로 요소의 좌표 위치를 반환하는 것입니다. 단순히 item.offsetLeft 또는 item.style.left를 읽으면 문서 문서가 아닌 상위 요소에 상대적인 요소의 위치를 ​​얻게 됩니다. 우리 스크립트에서는 모든 요소가 문서에 상대적이므로 이것이 필요합니다.
문서를 기준으로 요소의 위치를 ​​가져오는 작업을 완료하기 위해 getPosition은 자체 부모에서 시작하여 왼쪽 및 위쪽 값을 가져오기 위해 반복하고 이를 누적하여 두 요소 사이의 거리를 얻습니다. 요소와 우리가 원하는 문서의 상단이 왼쪽에 누적됩니다.
이 정보를 얻고 마우스를 움직이면 mouseMove가 실행되기 시작합니다. 먼저 item.style.position 값이 절대값인지 확인해야 합니다. 그런 다음 요소를 임의의 위치로 이동할 때 이전에 기록한 요소를 기준으로 한 마우스 오프셋에서 마우스 위치를 뺍니다. 마우스를 놓으면 dragObject가 null로 설정되고 mouseMove 함수는 더 이상 아무 작업도 수행하지 않습니다.

요소 배치
이전 예에서는 이미 요소를 끌어다 놓는 방법으로 이 문제를 처리했습니다. 그런 다음 요소를 드롭할 때 일반적으로 다른 목적이 있습니다. 예를 들어 요소를 쓰레기통에 드래그하거나 요소를 페이지의 특정 영역에 정렬하려고 할 수 있습니다.
안타깝게도 우리는 여기서 비교적 큰 문제에 직면하게 됩니다. 이동하려는 요소는 항상 마우스 바로 아래에 있기 때문에 페이지의 다른 요소에 대해 마우스 오버, 마우스 다운, 마우스 업 또는 마우스 작업을 수행하는 것은 불가능합니다. 요소를 쓰레기통으로 이동하면 마우스는 항상 쓰레기통이 아닌 이동된 요소 위에 있게 됩니다.
그렇다면 이 문제를 어떻게 처리해야 할까요? 여기에는 몇 가지 해결책이 있습니다. 앞서 언급한 mouseOffset의 목적은 요소가 항상 마우스 아래의 올바른 위치에 있는지 확인하는 것입니다. 이를 무시하고 요소를 항상 마우스 오른쪽 하단에 만들면 요소가 마우스를 끌지 않습니다. 숨겨져 있으므로 문제가 발생하지 않습니다. 그러나 실제로는 그렇지 않은 경우가 많습니다. 아름다움을 위해 일반적으로 요소를 마우스 아래에 유지하려고 합니다.
또 다른 옵션은 드래그하는 요소를 이동하지 않는 것입니다. 마우스 스타일을 변경하여 요소를 어딘가에 놓을 때까지 드래그하고 있음을 사용자에게 알릴 수 있습니다. 이를 통해 문제가 해결되지만 이전 솔루션과 동일한 문제인 미학이 발생합니다.
우리의 최종 솔루션은 이동 중인 요소나 이동이 끝난 요소(예: 쓰레기통)에 영향을 주지 않습니다. 불행히도 이는 이전 두 솔루션보다 더 어렵습니다. 우리가 할 일은 배치하려는 대상 세트를 얻는 것입니다. 마우스를 놓으면 각 대상에 대한 현재 마우스 위치를 수동으로 확인하여 마우스가 다음 중 하나의 위치에서 놓는지 확인합니다. 대상이고, 그렇다면 대상에 요소를 배치했다는 것을 알 수 있습니다.

코드

코드 복사 코드는 다음과 같습니다.

/*

아래로 대체되는 mouseUp 함수를 제외하고 이전 예제의 모든 코드가 필요합니다.
*/
var dropTargets = []
function addDropTarget(dropTarget) {
dropTargets.push(dropTarget)
}
function mouseUp(ev) {
ev = ev || window.event;
var mousePos = mouseCoords(ev); i = 0 ; i < dropTargets.length; i ) {
var curTarget = dropTargets[i];
var targPos = getPosition(curTarget); 🎜>var targHeight = parsInt(curTarget.offsetHeight);
if (
(mousePos.x > targPos.x) &&
(mousePos.< (targPos.x targWidth)) &&
(mousePos.y > targPos.y) &&
(mousePos.y < (targPos.y targHeight))) {
// dragObject가 curTarget에 떨어졌습니다!
}
}
드래그객체 = null
}



이 예에서는 마우스를 놓으면 요소가 배치될 수 있는 각 대상을 반복합니다. 마우스 포인터가 대상에 있으면 마우스 가로좌표가 요소를 배치하는 이벤트가 발생합니다. 대상 요소의 왼쪽 가로 좌표(mousePos.x>targPos.x)는 대상 요소의 오른쪽 가로 좌표(mousePos.x
모든 기능 통합
마지막으로 모든 코드 조각을 사용하여 완전한 드래그 앤 드롭 기능 스크립트를 만듭니다. 우리가 가장 먼저 해야 할 일은 DOM 조작입니다. 이에 대해 잘 모르는 경우 "JavaScript Primer on DOM Manipulation"을 읽어보세요.
다음 코드는 이 문서의 두 번째 데모를 기반으로 각 요소를 이러한 컨테이너로 드래그할 수 있도록 컨테이너 및 컨테이너 그룹을 생성합니다. 이 코드를 사용하여 요소 순서를 재정렬하고, 탐색 창을 페이지의 왼쪽이나 오른쪽으로 이동하거나, 생각할 수 있는 다른 기능을 추가할 수 있습니다.
의사 코드를 사용하여 단계별로 설명하고 실제 코드는 독자들이 댓글을 통해 볼 수 있도록 남겨둡니다.
1. 문서가 처음 로드되면 dragHelper라는 DIV 태그를 생성합니다. 요소 이동을 시작하면 dragHelper가 숨겨진 요소가 되어 이동할 수 있습니다. 실제 요소는 드래그되지 않으며 insertBefore 및 AppendChild를 사용하여만 이동됩니다. 처음에는 dragHelper를 숨깁니다.
2. mouseDown 및 mouseUp 함수를 만듭니다. 처음에 이러한 모든 함수는 마우스 버튼의 상태가 기록되어 iMouseDown 변수가 마우스를 눌렀을 때 true이고 누르지 않았을 때 false라고 가정합니다.
3. 전역 변수 DragDrops와 CreateDragContainer 함수를 만듭니다. DragDrop에는 관련 컨테이너 세트가 포함되어 있습니다. CreateDragContainer에 전달된 모든 변수(컨테이너를 나타냄)는 새 컬렉션으로 구성되어 요소가 이러한 컨테이너 간에 자유롭게 이동할 수 있습니다. 또한 CreateDragContainer 함수는 setAttribute를 통해 각 컨테이너의 요소를 함께 바인딩합니다.
4. 이제 코드에서 각 요소가 있는 컬렉션을 알았으니 mouseMove 함수를 살펴보겠습니다. mouseMove 함수는 먼저 마우스 아래의 대상 요소를 나타내는 변수 target을 설정합니다. 이 요소가 컬렉션에 있는 경우(getAttribute로 판단) 다음 작업을 계속합니다.
4.1 먼저 필요한 경우 간단한 작업을 실행합니다. script 대상 요소의 클래스 속성을 변경하기 위해 반전 효과를 만듭니다.
4.2. 그런 다음 이벤트가 발생하면 마우스가 클릭되었는지 확인합니다(여기에서는 코드가 이미 실행되었기 때문입니다).
4.2.1 변수 curTarget을 현재 요소로 설정합니다.
4.2.2. 필요할 때 해당 값을 검색할 수 있도록 문서에서 요소의 현재 위치를 기록합니다.
4.2.3. 현재 요소를 dragHelper로 복제하여 요소의 숨겨진 백업을 이동할 수 있습니다.
4.2.4 dragHelper에 드래그된 요소의 전체 백업이 있으므로 이 요소는 항상 마우스 아래에 있으므로 dragObj 속성을 제거하여 dragObj가 더 이상 컬렉션에 없음을 코드에 알려야 합니다.
4.2.5. 컬렉션에 있는 각 요소의 현재 위치, 너비 및 높이를 빠르게 기록합니다. 요소가 처음 드래그되기 시작할 때 이 작업을 한 번만 수행하면 됩니다. 그렇지 않으면 마우스가 움직일 때마다 또는 초당 수백 번씩 수행해야 합니다.
4.3. 마우스를 클릭하지 않으면 이전과 동일한 대상 요소가 있거나 두 경우 모두 아무 작업도 수행되지 않습니다.
5. 이제 curTarget 변수를 확인합니다. curTarget은 드래그된 개체만 포함해야 하므로 존재하는 경우 요소를 드래그한다는 의미입니다.
5.1. 숨겨진 DIV를 마우스로 이동합니다. 이 요소는 기사 앞부분에서 만든 요소처럼 드래그할 수 있습니다.
5.2. 그런 다음 현재 컬렉션의 각 컨테이너에 마우스가 있는지 확인합니다.
5.2.1. 마우스가 컨테이너에 있는 경우 컨테이너의 각 요소를 확인하여 드래그 중인 요소가 어디에 속하는지 확인합니다.
5.2.2 그런 다음 드래그한 요소를 컨테이너의 다른 요소 앞이나 컨테이너의 마지막 위치에 배치합니다.
5.2.3.마지막으로 요소가 표시되는지 확인합니다.
6. 남은 것은 mouseUp 이벤트를 캡처하는 것입니다.
6.1 먼저 dragHelper를 숨겨야 합니다. 아무것도 드래그하지 않으므로 더 이상 필요하지 않습니다.
6.2. 드래그한 요소가 표시되면 해당 요소가 속한 컨테이너에 이미 존재하며 모든 작업이 완료된 것입니다.
6.3.드래그된 요소가 표시되지 않으면 원래 위치로 되돌립니다.