Help Testing Drag N' Drop Script Cross Browsers

[RenegadeFX]

I just need help testing this script cause I only have access to Macs and I need to test this Drag n' Drop Script in as many browsers as possible Like IE8,7 and so on I've already tested it on "Firefox 3, Safari 4 Beta, Opera 9.6, Camino 1.6, BumberCar 2, Flock 2, iCab 4.5, Internet Explorer 5, Mozilla 1.3, Navigator 9, OmniWeb 5.9, SeaMonkey 1.1, Shiira 2.2" and the only browser that caused trouble were Mozilla 1.3(Expected though) and IE 5(Also Expected).and Also I'm kinda new at this stuff so any help to Improve this script would be awesome thanks.

function getElementsByClass(Class,Node,Tag) {	var ClassElements = new Array();	Node = Node || document;	Tag = Tag || '*';	var Elems = Node.getElementsByTagName(Tag);	var Pattern = new RegExp('(^|\\\\s)'+Class+'(\\\\s|$)');	for (i = 0, j = 0; i < Elems.length; i++) {		if (Pattern.test(Elems[i].className)) {			ClassElements[j] = Elems[i];			j++;		}	}	return ClassElements;}document.onmousemove = MouseMove;document.onmouseup   = MouseUp;var DragObj  = null;var MouseOffset = null;var DropZones = null;var Constraint = null;var Revert = false;var oPos = {};function SetDropZones(Drops) {	DropZones = new Array(Drops.length);	for(i=0;i<Drops.length;i++) {		DropZones[i] = Drops[i];	}}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 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.opacity  = 0.7;		if(Constraint) {				if(Constraint.toLowerCase() == 'horizontal') {					DragObj.style.left	 = MousePos.x - MouseOffset.x+"px";				}								if(Constraint.toLowerCase() == 'vertical') {					DragObj.style.top	  = MousePos.y - MouseOffset.y+"px";				}			}						else {				DragObj.style.top	  = MousePos.y - MouseOffset.y+"px";				DragObj.style.left	 = MousePos.x - MouseOffset.x+"px";			}				return false;	}}function FirstMove(e) {	e = e || window.event;	var MousePos = MouseCoords(e);		DragObj.style.top	  = MousePos.y - MouseOffset.y+"px";	DragObj.style.left	 = MousePos.x - MouseOffset.x+"px";}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 MouseUp(e) {	e = e || window.event;	var MousePos = MouseCoords(e);			if(DropZones) {		if(DragObj) {			for(var i=0; i<DropZones.length; i++) {				var CurrTarget  = document.getElementById(DropZones[i]);				var TargetPos	= GetPosition(CurrTarget);				var TargetWidth  = CurrTarget.offsetWidth;				var TargetHeight = CurrTarget.offsetHeight;									if(					(MousePos.x > TargetPos.x) &&					(MousePos.x < (TargetPos.x + TargetWidth)) &&					(MousePos.y > TargetPos.y) &&					(MousePos.y < (TargetPos.y + TargetHeight))) {						CurrTarget.innerHTML += '<br /><br />Dropped Object <br />"'+DragObj.id+'"';						if(Revert) {							DragObj.style.left = oPos.x;							DragObj.style.top = oPos.y;						}												else {							DragObj.style.display = 'none';						}				}			}		}	}	if(DragObj) {		if(Revert) {			DragObj.style.left = oPos.x+'px';			DragObj.style.top = oPos.y+'px';		}	}		if(DragObj) {		DragObj.style.opacity  = 1.0;		DragObj.MozOpacity = 1.0;		DragObj.KhtmlOpacity = 1.0;		DragObj.filter = "alpha(100)";		DragObj   = null;		DropZones = null;		Constraint = null;	}}function Draggable(Id,Params) {	if(!Id) return;			Window = document.getElementById(Id);			if(Params.Handle) {		var Elems = getElementsByClass(Params.Handle,Window);				Obj = Elems[0];	}		else {		Obj = Window;	}		this.Obj = Window;		Obj.onmousedown = function(e) {		DragObj  = document.getElementById(Id);		MouseOffset = GetMouseOffset(document.getElementById(Id), e);		Constraint = Params.Constraint || null;		Revert = Params.Revert || false;		FirstMove(e);		var Tags = document.getElementsByTagName("*");		for(i=0;i<Tags.length;i++) {			if(Tags.item(i).style.position == "absolute") {				Tags.item(i).style.zIndex = 100;			}		}		DragObj.style.position = 'absolute';		DragObj.style.zIndex   = 10000;		DragObj.style.opacity  = 0.7;		DragObj.MozOpacity = 0.7;		DragObj.KhtmlOpacity = 0.7;		DragObj.filter = "alpha(70)";		oPos = {x:DragObj.offsetLeft,y:DragObj.offsetTop };		if(Params.Drops) {			SetDropZones(Params.Drops);		}	return false;	}		this.Stop = function() {		DragObj.style.opacity  = 1.0;		DragObj.MozOpacity = 1.0;		DragObj.KhtmlOpacity = 1.0;		DragObj.filter = "alpha(100)";		DragObj = null;	}}

And here's the rest of the code

<!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: default;	border:  #000 1px solid;	background: #FFF;	width: 200px;	height: auto;	float: left;}.Draggables div {	padding: 10px;}#Dropper_1 {	position: absolute;	left: 10px;	top: 300px;}#Dropper_2 {	position: absolute;	left: 220px;	top: 300px;}.Dropper {	width: 180px;	height: 140px;	border: #000 1px solid;	overflow: auto;	padding: 10px;}.Handles {	display: block;	background: #CCF;	border-bottom: #36C 1px solid;	cursor: move;	text-decoration: none;	margin-top: 0px;}#Draggable_1 {	position: absolute;	left: 10px;	top: 163px;}#Draggable_2 {	position: absolute;	left: 220px;	top: 163px;}#Draggable_3 {	position: absolute;	left: 110px;	top: 26px;}#Draggable_4 {	position: absolute;	left: 430px;	top: 205px;}#Draggable_5 {	position: absolute;	left: 430px;	top: 300px;}</style><script type="text/javascript" language="javascript" src="External/Scriptacular.js"></script></head><body><div class="Draggables" id="Draggable_1">	<a href="java script:void(0);" class="Handles">    </a>	<div>		This is the First Draggable Box that you can only drop in drop box 1.	</div></div><div class="Draggables" id="Draggable_2">	<a href="java script:void(0);" class="Handles"> </a>	<div>		This is the Second Draggable Box That you can drop in either Drop box 1 or 2.	</div></div><div class="Draggables" id="Draggable_3">	<a href="java script:void(0);" class="Handles"> </a>	<div>		This is the Third Draggable Box that can't get drop in any of the Drop Boxes.	</div></div><div class="Draggables" id="Draggable_4">	<a href="java script:void(0);" class="Handles"> </a>	<div>		This Draggable Box Can only move Horizontally	</div></div><div class="Draggables" id="Draggable_5">	<a href="java script:void(0);" class="Handles"> </a>	<div>		This Draggable Box Can only move Vertically	</div></div><div class="Dropper" id="Dropper_1">	This is Drop Box 1</div><div class="Dropper" id="Dropper_2">	This is Drop Box 2</div><script type="text/javascript" language="javascript">new Draggable('Draggable_1',{	Drops:['Dropper_1'],	Handle:'Handles',	Revert:true});new Draggable('Draggable_2',{	Drops:['Dropper_1','Dropper_2'],	Handle:'Handles',	Revert:true});new Draggable('Draggable_3',{	Handle:'Handles',});new Draggable('Draggable_4',{	Handle:'Handles',	Constraint:'horizontal',	Revert:true});new Draggable('Draggable_5',{	Handle:'Handles',	Constraint:'vertical',	Revert:true});</script></body></html>

Ok here's a link to a page with it on it. http://advancedscripts.webs.com/DragnDrop/

[sckewi]

Could you upload it somewhere and post a link? Maybe somewhere like Freewebs (sign up for an advanced account so you can edit your pages directly). I'd love to try it out but I'm too lazy to put together a web-page from the script you've posted

[sckewi]

Seems to work really well . If it's any help I'm using Google Chrome (web browser).

[RenegadeFX]

Seems to work really well . If it's any help I'm using Google Chrome (web browser).

Thanks you sooo much. :)And yes that does help to know what browser.If it's not to much trouble what OS are you running(like Window XP, Vista, 98)

[sckewi]

Vista

[justsomeguy]

It seems to work in IE7, Opera and Firefox on XP.

[factor5]

It seem to not work wery well under Opera/9.64 (Windows XP). The Draggable object just sticks to the mouse pointer and there is no way to release it. Works fine under FF 3.0.3.

[RenegadeFX]

Thank you all oh so very much.

[jlhaslip]

ff 3.0.11 Linux - works great