]
당신 이 코드는 이전 코드의 거의 완전한 모음입니다. 이전 코드를 함께 결합하면 드래그 앤 드롭 효과를 얻을 수 있습니다.
항목을 클릭하면 마우스 위치 등 많은 변수를 얻게 됩니다. 마우스 위치에는 당연히 해당 항목의 좌표 정보가 포함됩니다. 20*20px 이미지의 중앙을 클릭하면 마우스의 상대 좌표는 {x:10,y:10}입니다. 이 이미지의 왼쪽 상단을 클릭하면 마우스의 상대 좌표는 {x:0,y:0}입니다. 클릭하면 이 방법을 사용하여 마우스 및 이미지 보정에 대한 정보를 얻습니다. 페이지 항목을 로드할 수 없는 경우 정보는 문서 정보가 되며 클릭한 항목 정보는 무시됩니다.
mouseOffset 함수는 또 다른 함수인 getPosition을 사용합니다. getPosition의 함수는 item.offsetLeft 또는 item.style.left를 얻으려고 할 때 페이지의 왼쪽 상단을 기준으로 항목의 좌표를 반환하는 것입니다. , 그러면 전체 문서가 아닌 상위 레벨의 위치를 기준으로 항목을 가져옵니다. 모든 스크립트는 전체 문서와 관련이 있으므로 더 좋습니다.
getPosition 작업을 완료하려면 항목의 상위 항목을 루프에서 가져와야 하며 항목의 왼쪽/상단 위치에 콘텐츠를 로드합니다. 원하는 상단 및 좌측 목록을 관리해야 합니다.
mousemove 함수가 정의되어 있으므로 mouseMove는 항상 실행됩니다. 먼저 항목의 style.position이 절대적인지 확인하고 두 번째로 항목을 이전에 정의된 위치로 이동합니다. 마우스 클릭을 놓으면 dragObject가 null로 설정되고 mouseMove는 더 이상 아무 작업도 수행하지 않습니다.
항목 놓기
이전 예제의 목적은 매우 간단합니다. 항목을 원하는 위치로 드래그하는 것입니다. 예를 들어 항목 삭제와 같은 다른 목적이 있는 경우가 많습니다. 예를 들어 항목을 휴지통으로 끌거나 다른 페이지에서 정의한 위치로 끌 수 있습니다.
안타깝게도 드래그하면 mouseove, mousedown, mouseup 또는 기타 마우스 동작과 같이 항목이 마우스 아래에 있게 되는 문제가 있습니다. 항목을 휴지통으로 드래그하면 마우스 정보는 휴지통이 아닌 항목에 계속 남아 있습니다.
이 문제를 어떻게 해결하나요? 이를 해결하는 방법에는 여러 가지가 있습니다. 첫째, 이는 과거에 권장되었던 방식입니다. 마우스를 움직일 때 항목이 마우스를 따라가며 mouseover/mousemove 및 기타 마우스 이벤트를 차지하지 않습니다. mouseover 및 기타 마우스 이벤트를 사용하면 문제가 해결되지만 보기에는 좋지 않습니다. 항목이 마우스를 직접 따라갈 수 있기를 바랍니다.
또 다른 옵션은 항목을 드래그하지 않는 것입니다. 마우스 포인터를 변경하여 드래그할 항목을 표시한 다음 마우스를 놓은 위치에 놓을 수 있습니다. 이 솔루션은 미적인 이유로도 허용되지 않습니다.
최종 해결책은 드래그 효과를 제거하지 않는 것입니다. 이 방법은 처음 두 가지보다 훨씬 복잡합니다. 릴리스해야 하는 대상 목록을 정의해야 합니다. 마우스를 놓았을 때 릴리스 위치가 대상 목록 위치에 있는지 수동으로 확인해야 합니다. ．목표 위치에서 해제됩니다.
코드는 다음과 같습니다.<script>
var iMouseDown = false;
var dragObject = null;
var curTarget = null;
function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function getPosition(e){
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
return {x:left, y:top};
}
function mouseCoords(ev){
if(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
};
}
function mouseDown(ev){
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.onmousedown || target.getAttribute('DragObj')){
return false;
}
}
function mouseUp(ev){
dragObject = null;
iMouseDown = false;
}
function mouseMove(ev){
ev = ev || window.event;
/*
We are setting target to whatever item the mouse is currently on
Firefox uses event.target here, MSIE uses event.srcElement
*/
var target = ev.target || ev.srcElement;
var mousePos = mouseCoords(ev);
if(dragObject){
dragObject.style.position = 'absolute';
dragObject.style.top = mousePos.y - mouseOffset.y;
dragObject.style.left = mousePos.x - mouseOffset.x;
}
// track the current mouse state so we can compare against it next time
lMouseState = iMouseDown;
// this prevents items on the page from being highlighted while dragging
if(curTarget || dragObject) return false;
}
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
window.onload = function() {
makeDraggable(document.getElementById('DragImage5'));
makeDraggable(document.getElementById('DragImage6'));
makeDraggable(document.getElementById('DragImage7'));
makeDraggable(document.getElementById('DragImage8'));
}
</script>
/*
All code from the previous example is needed with the exception
of the mouseUp function which is replaced below
*/
var dropTargets = [];
function addDropTarget(dropTarget){
dropTargets.push(dropTarget);
}
function mouseUp(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
for(var i=0; i var curTarget = dropTargets[i];
var targPos = getPosition(curTarget);
var targWidth = parseInt(curTarget.offsetWidth);
var targHeight = parseInt(curTarget.offsetHeight);
if(
(mousePos.x > targPos.x) &&
(mousePos.x < (targPos.x + targWidth)) &&
(mousePos.y > targPos.y) &&
(mousePos.y < (targPos.y + targHeight))){
// dragObject was dropped onto curTarget!
}
}
dragObject = null;
}
마우스를 놓으면 드롭 속성이 있는지 확인하고, 마우스 포인터가 여전히 드롭 범위 내에 있으면 드롭 작업이 수행됩니다. (mousePos.x>targetPos.x)를 사용하여 마우스 포인터 위치가 대상 범위 내에 있는지 확인하고, 조건(mousePos.x
모두 함께 가져오기
드디어 드래그/드롭 스크립트 스니펫이 모두 완성되었습니다!다음은 DOM 핸들러를 생성하는 것입니다. 익숙하지 않다면 먼저 DOM 조작에 대한 JavaScript 입문서를 읽어보세요.
다음 코드는 컨테이너(컨테이너)를 생성하고 컨테이너 항목에 드래그/드롭해야 하는 모든 항목을 만듭니다. 이 코드는 이 기사의 두 번째 데모 뒤에 있습니다. 이를 통해 사용자는 목록(목록)을 기록하고 왼쪽 또는 오른쪽에 탐색 창으로 설정하거나 생각할 수 있는 더 많은 기능을 사용할 수 있습니다.
다음 단계에서는 독자가 실제 코드를 볼 수 있도록 "가짜 코드"를 사용합니다.
1. 문서가 처음 로드되면 dragHelper를 만듭니다. DIV.dragHelper는 움직이는 항목에 그림자 추가를 제공합니다. 실제 항목은 드래그되지 않았지만 insertBefor 및 AppendChild를 사용하여 이동되었습니다. dragHelper
2. mouseDown 및 mouseUp 함수를 사용합니다. 모든 작업은 iMouseDown 상태에 해당합니다. iMouseDown은 마우스 왼쪽 버튼을 누른 경우에만 true이고, 그렇지 않으면 false입니다.
3. 전역 변수 DragDrops를 만들었고 전역 함수 CreateDragContainer.DragDrops에는 서로 관련된 일련의 컨테이너가 포함되어 있습니다. 모든 매개변수(컨테이너)는 CreatedcragContainer를 통해 재구성되고 직렬화되어 자유롭게 이동할 수 있습니다. CreateDragContainer 함수는 또한 항목을 바인딩하고 속성을 설정합니다.
4. 이제 우리의 코드는 각 항목의 추가를 알고 있습니다. mouseMove 함수는 먼저 변수 대상을 설정합니다. 이 항목이 컨테이너에 있으면 마우스가 이동합니다. with getAttribute ):
작은 코드 조각을 실행하여 대상의 스타일을 변경합니다. 롤오버 효과 만들기
마우스가 놓이지 않았는지 확인하세요.
현재 항목을 나타내도록 curTarget을 설정하세요.
항목의 현재 위치를 기록하고, 필요한 경우 반환할 수 있습니다.
현재 항목을 dragHelper 로 이동하면 그림자 효과를 사용하여 항목을 이동할 수 있습니다.
항목을 dragHelper에 복사한 후에도 원본 항목은 여전히 마우스 포인터 아래에 있으므로 dragObj를 삭제해야 스크립트가 작동하고 dragObj가 포함됩니다. 컨테이너.
컨테이너에 있는 모든 항목의 현재 좌표, 높이/너비를 가져오므로 한 번만 기록하면 됩니다. 항목을 드래그하면 마우스로 이동할 때마다 수천 번 기록됩니다.
그렇지 않은 경우 이동해야 하는 항목이 아니므로 아무것도 할 필요가 없습니다.
5. curTarget을 확인하면 이동된 항목이 포함되어 있어야 합니다. 있는 경우 다음 작업을 수행합니다.
이전에 생성된 그림자 항목을 이동하기 시작합니다.
현재 컨테이너의 각 컨테이너를 확인하여 해당 범위 내에서 마우스가 이동했는지 확인하세요.
항목이 드래그되고 있는지 확인해 보겠습니다. 어느 컨테이너에 속함
컨테이너의 항목 앞이나 전체 컨테이너 뒤에 항목을 배치합니다.
항목이 보이는지 확인하세요
마우스가 컨테이너 안에 없으면 항목이 보이지 않는지 확인하세요 .
6. 이제 mouseUp 이벤트를 캡쳐하는 일만 남았습니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
