$50 Paypal to whoever can do this...

[daviscross]

$50 In Paypal to the person who solves this efficiently and effectly and provides a simple working example that I can take and use.

I'm trying to combine a couple of scripts (with little experience in javascript other then modifying pre-built scripts to death). The goal is to make a clone type page of iGoogle. I was originally quite close to my goal which is this script from dynamicdrive.com and a modification of that to make it save that a moderator did in the forum..

http://www.daviscross.com/ISSUE/cookies/
This is a page that uses a .js file for the dragging, as well as a .js file to write to "drop" coordinates to the users browser in cookies so that when they re-visit, it loads the divs where they previously dropped them.

But then I found and started fooling with this one...

http://www.daviscross.com/ISSUE/drag/
This page uses a header script that lets you drag the divs around the page locking them into predetermined "allowed" slots... it's written to have a (save) update order button where you can configure it to write the new order of the divs to a database. I want to use cookies to write it to the broser instead (preferably without having to click a button to do so)

GOAL: I was originally working with the ISSUE/cookies page when I discovered the "snap in" drag and drop script and would now like to use that, but implement the auto location saving cookie feature that I have in ISSUE/cookies. I've played with it a little but can't seem to get it and I would love some help / someone to show me exactly how to do it (lol). In the end this page needs to be able to manage and save to cookies between 25 and 40 divs.

Please help me

[Master_script_maker]

i improved your cookie script so it could handle 25 to 40 divs. you might want to note that people are often willing to do things for free and the offer for money in the title tends to put people off.

/**************************************************
 * dom-drag.js
 * 09.25.2001
 * www.youngpup.net
 * Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005
 **************************************************
 * 10.28.2001 - fixed minor bug where events
 * sometimes fired off the handle, not the root.
 **************************************************/

var Drag = {

	obj : null,

	init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
	{
		o.onmousedown	= Drag.start;

		o.hmode			= bSwapHorzRef ? false : true ;
		o.vmode			= bSwapVertRef ? false : true ;

		o.root = oRoot && oRoot != null ? oRoot : o ;

		if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
		if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
		if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
		if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

		o.minX	= typeof minX != 'undefined' ? minX : null;
		o.minY	= typeof minY != 'undefined' ? minY : null;
		o.maxX	= typeof maxX != 'undefined' ? maxX : null;
		o.maxY	= typeof maxY != 'undefined' ? maxY : null;

		o.xMapper = fXMapper ? fXMapper : null;
		o.yMapper = fYMapper ? fYMapper : null;

		o.root.onDragStart	= new Function();
		o.root.onDragEnd	= new Function();
		o.root.onDrag		= new Function();
	},

	start : function(e)
	{
		var o = Drag.obj = this;
		e = Drag.fixE(e);
		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
		o.root.onDragStart(x, y);

		o.lastMouseX	= e.clientX;
		o.lastMouseY	= e.clientY;

		if (o.hmode) {
			if (o.minX != null)	o.minMouseX	= e.clientX - x + o.minX;
			if (o.maxX != null)	o.maxMouseX	= o.minMouseX + o.maxX - o.minX;
		} else {
			if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
			if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
		}

		if (o.vmode) {
			if (o.minY != null)	o.minMouseY	= e.clientY - y + o.minY;
			if (o.maxY != null)	o.maxMouseY	= o.minMouseY + o.maxY - o.minY;
		} else {
			if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
			if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
		}

		document.onmousemove	= Drag.drag;
		document.onmouseup		= Drag.end;

		return false;
	},

	drag : function(e)
	{
		e = Drag.fixE(e);
		var o = Drag.obj;

		var ey	= e.clientY;
		var ex	= e.clientX;
		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
		var nx, ny;

		if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
		if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
		if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
		if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

		nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
		ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

		if (o.xMapper)		nx = o.xMapper(y)
		else if (o.yMapper)	ny = o.yMapper(x)

		Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
		Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
		Drag.obj.lastMouseX	= ex;
		Drag.obj.lastMouseY	= ey;

		Drag.obj.root.onDrag(nx, ny);
		return false;
	},

	end : function()
	{
		document.onmousemove = null;
		document.onmouseup   = null;
		Drag.obj.root.onDragEnd(	parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
									parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
		Drag.obj = null;
	},

	fixE : function(e)
	{
		if (typeof e == 'undefined') e = window.event;
		if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
		if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
		return e;
	}
};
/*******************************
*End dom-drag.js
*Begin script made by Master_Script_Maker
********************************/
function Dragable(el) {
	this.e=el;
	this.el=document.getElementById(el);

	this.load=function() {
		var re=new RegExp(this.e+"=[^;]+", "i"); //construct RE to search for target name/value pair
		if (document.cookie.match(re)) { //if cookie found
			return document.cookie.match(re)[0].split("=")[1];
		} else {
			return false;
		}
	};
	this.init = function() {
		Drag.init(this.el);
		var e=this.e;
		this.el.onDragEnd=function(x, y) {
			save(e, x+'||'+y, 30);
		};
		if(this.load()!=false) {
			var temp=this.load().split('||');
			this.el.style.left=parseInt(temp[0])+"px";
			this.el.style.top=parseInt(temp[1])+"px"
		}
	};
}
var save=function(n, s, d) {
	var expireDate = new Date();
	//set "expstring" to either an explicit date (past or future)
	var expstring=expireDate.setDate(expireDate.getDate()+parseInt(d));
	document.cookie = n+"="+s+"; expires="+expireDate.toGMTString()+"; path=/";
};
window.onload=function() {
	var you=new Dragable("mydivyoutube"); //for each dragable div create a var with a value of a new dragable with the id of the div
	var wiki=new Dragable("mydivwiki");
	var ref=new Dragable("mydivref");
	var ebay=new Dragable("mydivebay");
	var imdb=new Dragable("mydivimdb");

	you.init(); //then you init() them
	wiki.init();
	ref.init();
	ebay.init();
	imdb.init();
};

[daviscross]

Thank you for doing that, but the cookie script was already handle that many divs (the actually project currently has 30 and the page i posted here was just a small example.). As well, the goal is to incorporate that cookie script into the drag/drop page located here: http://www.daviscross.com/ISSUE/drag/