'Saving' positions in the 'Dom Drag & Drop'

[tp4f]

Hi.
I was wondering if it was possible to be able to save the positions of the dom drag & drop objects (using cookies, or something like that). The code I am referring to is http://www.dynamicdrive.com/dynamicindex11/domdrag/ .
(Hopefully) Thanks in advance!

[ddadmin]

Well, the basic idea is quite simple, but how involved it gets depends on what you're trying to do. The script supports a onDragEnd event that gives you access to the last known x and y position of the dragged element when the user's mouse button is back up:

<div id="mydiv" style="position: relative; width: 100px; height: 100px; background-color: lightyellow; border: 1px solid black; padding: 3px; z-index: 100">
Drag me!
</div>

<script type="text/javascript">
var mydiv=document.getElementById("mydiv")
Drag.init(mydiv)
mydiv.onDragEnd=function(x, y){
alert(x+" "+y)
}
</script>

In this example, the x,y coordinates is alerted whenever the user finishes dragging. The idea is then to save these numbers into the user's browser cookies, something like:

<script type="text/javascript">
var mydiv=document.getElementById("mydiv")
Drag.init(mydiv)
mydiv.onDragEnd=function(x, y){
setCookie("mydiv", x+"||"+y, 30)
}

function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "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] //return its value
return ""
}

function setCookie(name, value, days){
var expireDate = new Date()
//set "expstring" to either an explicit date (past or future)
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"
}
</script>

Finally, the cookie now contains the last known coordinates for the dragged element "mydiv":

alert(getCookie("mydiv"))

That's the basic idea.

[tp4f]

Well, the basic idea is quite simple, but how involved it gets depends on what you're trying to do. The script supports a onDragEnd event that gives you access to the last known x and y position of the dragged element when the user's mouse button is back up:

<div id="mydiv" style="position: relative; width: 100px; height: 100px; background-color: lightyellow; border: 1px solid black; padding: 3px; z-index: 100">
Drag me!
</div>

<script type="text/javascript">
var mydiv=document.getElementById("mydiv")
Drag.init(mydiv)
mydiv.onDragEnd=function(x, y){
alert(x+" "+y)
}
</script>

In this example, the x,y coordinates is alerted whenever the user finishes dragging. The idea is then to save these numbers into the user's browser cookies, something like:

<script type="text/javascript">
var mydiv=document.getElementById("mydiv")
Drag.init(mydiv)
mydiv.onDragEnd=function(x, y){
setCookie("mydiv", x+"||"+y, 30)
}

function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "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] //return its value
return ""
}

function setCookie(name, value, days){
var expireDate = new Date()
//set "expstring" to either an explicit date (past or future)
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"
}
</script>

Finally, the cookie now contains the last known coordinates for the dragged element "mydiv":

alert(getCookie("mydiv"))

That's the basic idea.

Thanks, but just 3 last things. The next time the same user opens that page, will it automaticly open the cookies, so that the divs will go into position?
Also, where do i put the

alert(getCookie("mydiv"))

?
And lastly, is it possible to make this: http://www.dynamicdrive.com/dynamici...edcollapse.htm draggable?

Thank you so much, whoever answers these

[ddadmin]

No, the alert() line I provided is just for illustration, so you can see that the coordinates are being stored. Here's a full working example of a DIV with its dragged coordinates remembered, so reloading the page causes the DIV to move back to its last known position:

<div id="mydiv" style="position: relative; width: 100px; height: 100px; background-color: lightyellow; border: 1px solid black; padding: 3px; z-index: 100">
Drag me!
</div>

<script type="text/javascript">
var mydiv=document.getElementById("mydiv")
Drag.init(mydiv)
mydiv.onDragEnd=function(x, y){
setCookie("mydiv", x+"||"+y, 30)
}

if (getCookie("mydiv")!=""){
var mydivcookie=getCookie("mydiv").split("||")
document.getElementById("mydiv").style.left=parseInt(mydivcookie[0])+"px"
document.getElementById("mydiv").style.top=parseInt(mydivcookie[1])+"px"
}

function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "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] //return its value
return ""
}

function setCookie(name, value, days){
var expireDate = new Date()
//set "expstring" to either an explicit date (past or future)
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"
}

</script>

And lastly, is it possible to make this: http://www.dynamicdrive.com/dynamici...edcollapse.htm draggable?

Now we digress.

[tp4f]

No, the alert() line I provided is just for illustration, so you can see that the coordinates are being stored. Here's a full working example of a DIV with its dragged coordinates remembered, so reloading the page causes the DIV to move back to its last known position:

<div id="mydiv" style="position: relative; width: 100px; height: 100px; background-color: lightyellow; border: 1px solid black; padding: 3px; z-index: 100">
Drag me!
</div>

<script type="text/javascript">
var mydiv=document.getElementById("mydiv")
Drag.init(mydiv)
mydiv.onDragEnd=function(x, y){
setCookie("mydiv", x+"||"+y, 30)
}

if (getCookie("mydiv")!=""){
var mydivcookie=getCookie("mydiv").split("||")
document.getElementById("mydiv").style.left=parseInt(mydivcookie[0])+"px"
document.getElementById("mydiv").style.top=parseInt(mydivcookie[1])+"px"
}

function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "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] //return its value
return ""
}

function setCookie(name, value, days){
var expireDate = new Date()
//set "expstring" to either an explicit date (past or future)
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"
}

</script>

Now we digress.

It still isn't working. I copied that code word for word, added this to the end of the page:

Drag.init(document.getElementById("mydiv"));

It just (when you reload the page) goes back to its original position.

[tp4f]

I've uploaded the actual page (in a zip). The actual drag works, but when i reaload the page, it goes back to its original spot. Can you please only put the script on "mydiv"?
Thank you!!!

PS: I think the problem is I've put the code in the wrong spot

[ddadmin]

So it works for you now? I just tested what I had posted, and it does work (reloading page still remembers last dragged positions).