View Full Version : DOM Drag & Drop (Saved but need more)

06-19-2008, 06:52 AM
1) Script Title: DOM Drag & Drop Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/domdrag/

3) Describe problem:

I've used this script, well a modification of it where it saves the dragged location to a cookie as a moderator posted here ----> http://www.dynamicdrive.com/forums/showthread.php?t=24330&highlight=drag+drop+save

Now, its pretty cool because once you put them where you want them, they stay there, however the first time you visit the page http://www.daviscross.com/x/drag.html they line down the left of the page.

But I have a problem, I want to set default locations for each div easily so that the first time you visit the page, the divs are in the default location... when the visitor moves them, leaves and returns they are where he left them, not back in the default positions. While ive read about positioning divs, my problem is that this page is going to be a resource page for employees while at the office and while some of them have 4:3 ratio monitors, most of them have 16:9 ratio... so if i user centering div techniques they wont be in the center of ALL screens used.

Is there a simple way to make this happen... I thought about setting the cookies for the appearence on my screen, and copying them into a directory on the server that when someone visits the page for the first time only, it copies those cookies to their browser and bam, there it is... but I cant find anything like that.

Any suggestions?

Another (and preferred) option would be to have it setup like the iGoogle widgets where you drag them to the dotted areas etc.... any help?

I should mention that embarassingly enough this is my first time doing anything with divs and that while I have a programming background, its not in javascript or ajax or anything so while I can pretty much read code for stuff like this, understand it and modify it bit by bit... i have no idea what any of it actually means lol

Thank you!

06-19-2008, 02:48 PM
Things have changed in the last few hours....

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

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

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 :)

09-29-2008, 07:34 PM
I'm trying to achieve something similar to igoogle's drag and place in pre-determined spots also, but I'm perfectly happy with the results being saved to a database. The second script referred to by daviscross sounds like it's almost exactly what I've been searching for.

Unfortunately the daviscross links above are dead and the author did not link to the original source of the script he found. If anyone knows of something like this I'd be grateful for a link....

The closest thing I've found is this http://www.dynamicdrive.com/dynamicindex11/domdrag/ but it's missing several pieces I need.

My desired end result is a page where content editors can shuffle page elements around and then save the final result to the database. I also want them to be able to push elements out of the way (which may create a cascade effect) by dropping new elements on top.