PDA

View Full Version : 'Saving' positions in the 'Dom Drag & Drop'



tp4f
09-02-2007, 10:42 AM
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! :p

ddadmin
09-02-2007, 10:19 PM
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
09-03-2007, 09:35 AM
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/dynamicindex17/animatedcollapse.htm draggable?

Thank you so much, whoever answers these :D

ddadmin
09-03-2007, 10:12 PM
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
09-03-2007, 11:07 PM
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
09-10-2007, 10:28 AM
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 :D

ddadmin
09-12-2007, 08:36 AM
So it works for you now? I just tested what I had posted, and it does work (reloading page still remembers last dragged positions).