JavaScript 드래그 앤 드롭 샘플 웹페이지 - 빠른 드래그 앤 드롭 문제 해결 .drag{border:1px solid; width:400px; background:#CCCCCC;} #test1{ top:20px;} #test2{ left:40px;} 예제 DIV1을 드래그하고 있습니다. 효과를 테스트해 볼 수 있습니다. 저는 드래그 앤 드롭 예시 DIV2입니다. [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ] var dragElement = null; var mouseY; var mouseX; var x=""; var y=""; var max = 1; function dragInit(node){ if(node.className == "drag"){ node.onmousedown = down; document.onmousemove = move; node.onmouseover = over; node.style.position = "relative"; node.dragging = false; } var children = node.childNodes; for(var i = 0;i < children.length; i++){ dragInit(children[i]); } } window.onload = function(){ dragInit(document); document.onmouseup = docUp; } function down(event) { event = event || window.event; dragElement = this; mouseX = parseInt(event.clientX); mouseY = parseInt(event.clientY); objY = parseInt(getNodeStyle(dragElement,"top")); objX = parseInt(getNodeStyle(dragElement,"left")); //IE不返回未设置的CSS属性 if(!objY)objY=0; if(!objX)objX=0; this.style.zIndex = max++; } function move(event){ event = event || window.event; if(dragElement){ var x,y; y = event.clientY - mouseY + objY; x = event.clientX - mouseX + objX; dragElement.style.top = y + "px"; dragElement.style.left = x + "px"; //移动完元素之后,延迟一段时间 document.onmousemove = null; setTimeout("document.onmousemove = move;",40); } } function docUp(){ dragElement = null; } function over(){ this.style.cursor = "move"; } function getNodeStyle(node,styleName){ var realStyle = null; if(node.currentStyle){ realStyle = node.currentStyle[styleName]; }else if(window.getComputedStyle){ realStyle = window.getComputedStyle(node,null)[styleName]; } return realStyle; }