RenegadeFX Posted May 31, 2009 Share Posted May 31, 2009 This Drag n' Drop script does seem to want to work and My browsers(Firefox,Safari "on a Mac") don't throw me any errors so I just need some help finding out whats wrong.Here's the Code <body><div class="Draggables" id="Draggable_1" onmouseover="MakeIt(this.id);"> Drag and drop me</div><div class="Draggables" id="Draggable_2" onmouseover="MakeIt(this.id);"> Drag and drop me too</div><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">function MakeIt(Id) { Draggable.Create(Id);}document.onmousemove = Draggable.MouseMove;document.onmouseup = Draggable.MouseUp;function Draggable() { var DragObj = null; var MouseOffset = 0; var oPos = {x:0,y:0}; var DropTargets = ['Dropper_1','Dropper_2']; this.Create = function(Id) { if(!Id) { return; } Obj = document.getElementById(Id); Obj.onmousedown = function(e) { DragObj = Obj; oPos.x = DragObj.offsetLeft; oPos.y = DragObj.offsetTop; MouseOffset = Draggable.GetMouseOffset(DragObj,e); return false; } } this.GetMouseOffset = function(Target,e) { e = e || window.event; var DocPos = Draggable.GetPosition(Target); var MousePos = Draggable.MouseCoords(e); return {x:MousePos.x-DocPos.x,y:MousePos.y-DocPos.y}; } this.MouseCoords = function(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.clientY }; } this.GetPosition = function(Obj) { var Left = 0; var Top = 0; while(Obj.offsetParent) { Left += Obj.offsetLeft; Top += Obj.offsetTop; Obj = Obj.offsetParent; } Left += Obj.offsetLeft; Top += Obj.offsetTop; return {x:Left,y:Top}; } this.AddDropTargets = function(DropTarget) { DropTargets.push(DropTarget); } this.MouseMove = function(e) { e = e || window.event; var MousePos = Draggable.MouseCoords(e); if(DragObj) { DragObj.style.position = 'absolute'; DragObj.style.left = MousePos.x - MouseOffset.x; DragObj.style.top = MousePos.y - MouseOffset.y; return false; } } this.MouseUp = function(e) { e = e || window.event; var MousePos = Draggable.MouseCoords(e); if(DragObj) { for(var i=0; i<DropTargets.length; i++) { var CurrTarget = document.getElementById(DropTargets[i]); var TargetPos = Draggable.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.display = "none"; } } DragObj = null; } }}var Draggable = new Draggable();</script></body> Please Any help would be awesome Link to comment Share on other sites More sharing options...
justsomeguy Posted June 1, 2009 Share Posted June 1, 2009 Add some alerts to see what's going on. See if the create function gets called, if the mouse functions are getting called, etc. It will be easier if you install Firebug for Firefox and then use console.log instead of alert to debug. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.