Saving dragged divs with cookie

**Beth** · 10-26-2008, 01:42 AM

1) Script Title: DOM Drag & Drop script

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

3) Describe problem:

Hi there. Is there a script that works with this great Drag and Drop script that saves the location of the dragged divs in a cookie? I've tried searching for one on Dynamic Drive and beyond with no luck.

Thanks.

**jscheuer1** · 10-27-2008, 01:49 PM

A standard cookie unit like the one available at quirksmode.org could be used to store the coordinates from onDrag function. Onload of the page, if this cookie exists, its coordinates could be used to reposition the element wherever it had last been.

**Beth** · 10-27-2008, 10:34 PM

Thanks for replying jscheuer1 but unfortunately that's a bit beyond me. I was hoping there was a ready made example to go with this particular Drag & Drop script (I'm just using the basic version). The cookie doesn't need to have an expiry date like the quirksmode.org script.

Thanks anyway.

**ddadmin** · 10-28-2008, 02:50 AM

There's a thread on this actually. See this one: http://www.dynamicdrive.com/forums/s...ad.php?t=24330

**Beth** · 10-28-2008, 09:51 AM

OK so I've added the script from the thread you posted ddadmin but it isn't working. What am I doing wrong? Here's the complete code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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>Cookie Test</title>

<style type="text/css">
.drag{
    position:relative;
	cursor:move;
	z-index: 100;
} 
</style>

<script type="text/javascript">
/***********************************************
* Drag and Drop Script: © Dynamic Drive http://www.dynamicdrive.com
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}

dragobject.initialize()
</script>

<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");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1]
return ""
}

function setCookie(name, value, days){
var expireDate = new Date()
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"
}
</script>

</head>
<body>

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

</body>
</html>

**ddadmin** · 10-28-2008, 09:26 PM

The code referenced in that other thread does work, actually. However, all it does is store the last known coordinates of the DIV in a cookie. You need to take it a step further to have them retrieved when the page loads, and position the DIV accordingly. Here is a complete example. Try reloading the page to see how the position of the DIV gets persisted:

Code:

<script type="text/javascript" src="dom-drag.js"></script>

<body>

<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")
if (getCookie("mydiv")!=""){ //if stored coordinates for "mydiv" are found
	var coord=getCookie("mydiv")
 mydiv.style.left=coord.split("||")[0]+"px" //x value
 mydiv.style.top=coord.split("||")[1]+"px" //y value
}
Drag.init(mydiv)
mydiv.onDragEnd=function(x, y){
setCookie("mydiv", x+"||"+y, 30)
alert("Saved position for 'mydiv': "+x+" "+y)
}

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>

**Beth** · 10-29-2008, 10:23 AM

Thanks ddadmin that's awesome! I've removed the alert and it works perfectly!

**Beth** · 10-30-2008, 10:46 AM

Doh! I've just realised I posted the wrong Drag & Drop script at the beginning of the thread.
This is the one I'm using: http://www.dynamicdrive.com/dynamicindex4/image3.htm
This script is more versatile as it makes any element with the class "drag" draggable. I thought I could use the cookie script posted by ddadamin but it doesn't work with it. How can I amend the cookie script so that it saves the div position for this Drag & Drop script? Or does it require an entirely different one? Sorry. I'd really appreciate any help.

**ddadmin** · 10-30-2008, 08:59 PM

Actually, the original DOM Drag and Drop script is infinitely more versatile than the one you cited in your last post. You can quite easily modify the former to make all elements on the page with a certain CSS class name draggable. For example:

Code:

<img class="draggable" src="lips.gif" style="position: relative" />

<img class="draggable" src="lips.gif" style="position: relative" />

<img class="draggable" src="lips.gif" style="position: relative" />

<script type="text/javascript">
var allelements=document.getElementsByTagName("*")
for (var i=0; i<allelements.length; i++){
	if (allelements[i].className=="draggable")
		Drag.init(allelements[i])
}
</script>

**Beth** · 10-31-2008, 12:21 AM

Thanks so much for helping me ddadmin. OK I've added that script and it works great but the cookie script isn't saving the position of the elements when I refresh the page. Do I need to change anything in the cookie script you posted?

Thread: Saving dragged divs with cookie

Thread Tools

Search Thread

Saving dragged divs with cookie

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions