Jump to content

Drag N' Drop Failing But Not Getting Errors


RenegadeFX
 Share

Recommended Posts

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...