HTML 요소 드래그_자바스크립트 팁

데모 - 이미지 중 하나를 드래그하세요

<script> <BR>var iMouseDown = false; <BR>var dragObject = null; <BR>Number.prototype.NaN0=function(){return isNaN(this)?0:this;} <br><br>// Demo 0 variables <BR>var DragDrops = []; <BR>var curTarget = null; <BR>var lastTarget = null; <br><br>function makeDraggable(item){ <BR> if(!item) return; <BR> item.onmousedown = function(ev){ <BR> dragObject = this; <BR> mouseOffset = getMouseOffset(this, ev); <BR> return false; <BR> } <BR>} <br><br>function getMouseOffset(target, ev){ <BR> ev = ev || window.event; <br><br> var docPos = getPosition(target); <BR> var mousePos = mouseCoords(ev); <BR> return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y}; <BR>} <br><br>function getPosition(e){ <BR> var left = 0; <BR> var top = 0; <BR> while (e.offsetParent){ <BR> left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); <BR> top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); <BR> e = e.offsetParent; <BR> } <br><br> left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); <BR> top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); <br><br> return {x:left, y:top}; <br><br>} <br><br>function mouseCoords(ev){ <BR> if(ev.pageX || ev.pageY){ <BR> return {x:ev.pageX, y:ev.pageY}; <BR> } <BR> return { <BR> x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, <BR> y:ev.clientY + document.body.scrollTop - document.body.clientTop <BR> }; <BR>} <br><br>function mouseDown(ev){ <BR> ev = ev || window.event; <BR> var target = ev.target || ev.srcElement; <br><br> if(target.onmousedown || target.getAttribute('DragObj')){ <BR> return false; <BR> } <BR>} <br><br>function mouseUp(ev){ <br><br> //dragObject = null; <br><br> if(dragObject){ <BR> ev = ev || window.event; <BR> var mousePos = mouseCoords(ev); <br><br> var dT = dragObject.getAttribute('droptarget'); <BR> if(dT){ <BR> var targObj = document.getElementById(dT); <BR> var objPos = getPosition(targObj); <BR> if((mousePos.x > objPos.x) && (mousePos.y > objPos.y) <BR>&& (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth))) <BR> && (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){ <BR> var nSrc = targObj.getAttribute('newSrc'); <BR> if(nSrc){ <BR> dragObject.src = nSrc; <BR> setTimeout(function(){ <BR> if(!dragObject || !dragObject.parentNode) return; <BR> dragObject.parentNode.removeChild(dragObject); <BR> dragObject = null; <BR> }, parseInt(targObj.getAttribute('timeout'))); <BR> } else { <BR> dragObject.parentNode.removeChild(dragObject); <BR> } <BR> } <BR> } <BR> } <BR> dragObject = null; <br><br> iMouseDown = false; <BR>} <br><br>function mouseMove(ev){ <BR> ev = ev || window.event; <br><br> /* <BR> We are setting target to whatever item the mouse is currently on <br><br> Firefox uses event.target here, MSIE uses event.srcElement <BR> */ <BR> var target = ev.target || ev.srcElement; <BR> var mousePos = mouseCoords(ev); <br><br> if(dragObject){ <BR> dragObject.style.position = 'absolute'; <BR> dragObject.style.top = mousePos.y - mouseOffset.y; <BR> dragObject.style.left = mousePos.x - mouseOffset.x; <BR> } <br><br> // track the current mouse state so we can compare against it next time <BR> lMouseState = iMouseDown; <br><br> // this prevents items on the page from being highlighted while dragging <BR> if(curTarget || dragObject) return false; <BR>} <br><br>function addDropTarget(item, target){ <BR> item.setAttribute('droptarget', target); <BR>} <br><br>document.onmousemove = mouseMove; <BR>document.onmousedown = mouseDown; <BR>document.onmouseup = mouseUp; <br><br>window.onload = function (){ <BR> makeDraggable(document.getElementById('DragImage9')); <BR> makeDraggable(document.getElementById('DragImage10')); <BR> makeDraggable(document.getElementById('DragImage11')); <BR> makeDraggable(document.getElementById('DragImage12')); <br><br> addDropTarget(document.getElementById('DragImage9'), 'TrashImage1'); <BR> addDropTarget(document.getElementById('DragImage10'), 'TrashImage1'); <BR> addDropTarget(document.getElementById('DragImage11'), 'TrashImage1'); <BR> addDropTarget(document.getElementById('DragImage12'), 'TrashImage1'); <BR>} <BR></script>