RenegadeFX Posted May 29, 2009 Share Posted May 29, 2009 So heres what I have so far I it works fine except It adds 16px to the y coords when I start the Drag <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Drag n' Drop</title><style type="text/css">.Draggables { cursor: move; position: absolute; left: 220px; top: 20px;}.Dropper { width: 200px; height: 200px; -moz-border-radius: 10px; border: #000 1px solid;}</style></head><body><p class="Draggables" id="Draggable">Drag and drop the image</p><div class="Dropper" id="Dropper_1">Drop it here please :)</div><div class="Dropper" id="Dropper_2">Or Drop it here :)</div><script type="text/javascript" language="javascript">MakeDraggable(document.getElementById("Draggable"));document.onmousemove = MouseMove;document.onmouseup = MouseUp;var DragObj = null;var MouseOffset = null;var DropTargets = ['Dropper_1','Dropper_2'];var OrigX = 0;var OrigY = 0;function GetMouseOffset(Target, e){ e = e || window.event; var DocPos = GetPosition(Target); var MousePos = MouseCoords(e); return {x:MousePos.x - DocPos.x, y:MousePos.y - DocPos.y};}function MouseCoords(e){ if(e.pageX || e.pageY){ return {x:e.pageX, y:e.pageY}; } return { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop };}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(e){ e = e || window.event; var MousePos = MouseCoords(e); if(DragObj){ DragObj.style.position = 'absolute'; DragObj.style.top = MousePos.y + MouseOffset.y + "px"; DragObj.style.left = MousePos.x - MouseOffset.x + "px"; return false; }}function MakeDraggable(item){ if(!item) return; item.onmousedown = function(e){ DragObj = this; OrigX = DragObj.offsetLeft; OrigY = DragObj.offsetTop; MouseOffset = GetMouseOffset(this, e); return false; }}function AddDropTarget(DropTarget){ DropTargets.push(DropTarget);}function MouseUp(e) { e = e || window.event; var MousePos = MouseCoords(e); for(var i=0; i<DropTargets.length; i++) { var CurrTarget = document.getElementById(DropTargets[i]); var TargetPos = GetPosition(CurrTarget); var TargetWidth = parseInt(CurrTarget.offsetWidth); var TargetHeight = parseInt(CurrTarget.offsetHeight); if((MousePos.x > TargetPos.x)&&(MousePos.x < (TargetPos.x + TargetWidth))&&(MousePos.y > TargetPos.y)&&(MousePos.y<(TargetPos.y + TargetHeight))) { DragObj.style.left = OrigX+"px"; DragObj.style.top = OrigY+"px"; alert("Left: "+DragObj.offsetLeft + "\n Top: "+DragObj.offsetTop+"\n OrigX: "+OrigX+"\n OrigY: "+OrigY); } } DragObj = null;}</script></body></html> Link to comment Share on other sites More sharing options...
RenegadeFX Posted May 29, 2009 Author Share Posted May 29, 2009 Ha wow now I feel stupid I just changed a + to a - Ha sorry Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.