Jump to content

Drag N' Drop Classes

RenegadeFX

By RenegadeFX
in JavaScript

Recommended Posts

RenegadeFX Newbie

RenegadeFX

Posted
Posted

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
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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

Archived

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

Go to topic listing
×
×
  • Create New...