Jump to content

Drag N' Drop Classes


RenegadeFX
 Share

Recommended Posts

Need Help with my drag n' drop script I want to be able to send it a ClassName all elements with that className will be Draggable but It just Doesn't seem to work I got it to work fine with just an Id heres the script for that

<!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;	border:  #000 1px solid;	-moz-border-radius: 10px;}#Draggable_1 {	width: 100px;	height: auto;}#Draggable_2 {	width: 75px;	height: auto;}.Dropper {	width: 200px;	height: 200px;	-moz-border-radius: 10px;	border: #000 1px solid;	margin: 10px;}</style></head><body><div class="Draggables" id="Draggable_1">Drag and drop me</div><div class="Draggables" id="Draggable_2">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">MakeDraggable("Draggable_1");MakeDraggable("Draggable_2")function MakeDraggable(Id){	if(!Id) {		return;	}	var Obj = document.getElementById(Id);		if(Obj) {		Obj.onmousedown = function(e) {			DragObj = Obj;			OrigX = Obj.offsetLeft;			OrigY = Obj.offsetTop;			MouseOffset = GetMouseOffset(Obj,e);			return false;		}	}}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 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.display = "none";		}	}	DragObj = null;}</script></body></html>

So I thought all I needed to do was replace

MakeDraggable("Draggable_1");MakeDraggable("Draggable_2")function MakeDraggable(Id){	if(!Id) {		return;	}	var Obj = document.getElementById(Id);		if(Obj) {		Obj.onmousedown = function(e) {			DragObj = Obj;			OrigX = Obj.offsetLeft;			OrigY = Obj.offsetTop;			MouseOffset = GetMouseOffset(Obj,e);			return false;		}	}}

with this

MakeDraggable("Draggables");function MakeDraggable(Id){	if(!Id) {		return;	}	var Tag = document.getElementsByTagName("*");	var Obj = document.getElementById(Id);		if(Obj) {		Obj.onmousedown = function(e) {			DragObj = Obj;			OrigX = Obj.offsetLeft;			OrigY = Obj.offsetTop;			MouseOffset = GetMouseOffset(Obj,e);			return false;		}	}		else {		for(i=0;i<Tag.length;i++) {			Obj = Tag.item(i);			if(Obj.className == Id) {				Obj.onmousedown = function(e) {					DragObj = Obj;					OrigX = Obj.offsetLeft;					OrigY = Obj.offsetTop;					MouseOffset = GetMouseOffset(Obj,e);					return false;				}			}		}	}}

But it just wont work any help would be awesome and I'm new at this so be nice.

Link to comment
Share on other sites

It seems like it should work just by glancing over it, but if it's not doing what you expect you should probably just add some debugging statements to get a clear idea about what's happening. If you're not using Firebug, debugging will be easiest if you do, you can download that for Firefox. Once Firebug is installed and enabled, you can use console.log to write debug output to the Firebug console.The stuff to check on is anything having to do with the if statements. If something is not getting set, you need to know why.

function MakeDraggable(Id){	if(!Id) {		return;	}	var Tag = document.getElementsByTagName("*");	var Obj = document.getElementById(Id);		if(Obj) {		console.log("Obj was found");		console.log(Obj);		Obj.onmousedown = function(e) {			DragObj = Obj;			OrigX = Obj.offsetLeft;			OrigY = Obj.offsetTop;			MouseOffset = GetMouseOffset(Obj,e);			return false;		}	}		else {		console.log("Obj not found");		console.log(Tag.length + " tags found");		for(i=0;i<Tag.length;i++) {			Obj = Tag.item(i);			console.log(Obj);			console.log(Obj.className);			if(Obj.className == Id) {				console.log("found match");				Obj.onmousedown = function(e) {					DragObj = Obj;					OrigX = Obj.offsetLeft;					OrigY = Obj.offsetTop;					MouseOffset = GetMouseOffset(Obj,e);					return false;				}			}		}	}}

After going through that, I noticed you need to change this line:Obj = Tag.item(i);to this:Obj = Tag.item;

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...