Jump to content

Drag N' Drop Failing But Not Getting Errors


RenegadeFX

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...