PDA

View Full Version : DOM Drag & Drop script::: save new positions for reloading page?



Paul Williams
09-03-2012, 02:20 AM
1) Script Title: DOM Drag & Drop script::: save new positions for reloading page?

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

3) Describe problem: after dragging elements around the page and placing them, i go to a new page (same website) and then come back. the dragged elements are not where i put them. they are back at the original position.

i installed this script with no trouble.
works great and does not cause conflicts anywhere else.

1) after dragging elements around a map (background image on the map page), i want to be able to go to a new page on my website and then come back to the map page and see the dragged elements still in there new positions. i need some way of tweeking the script to save the new positions of the dragged elements, and after leaving that page and then returning (re-loading) i need a reference and placement of the dragged elements in the new positions.

2) would be nice if i could also save those new positions to the Database, and on-reload or re-starting the website, check for saved positions and reference those saved positions to re-populate the map page with the dragged elments in there new positions.

3) also need a "clear & restart" tab/button to reset all draggable elements to there original positions.

sorry if this seems like alot, but i'm sooooo close i can smell it.
your script is awsome and works so clean.
seems like i should be able to take the final values and store them in a DB, then reference and move forward.

thanks for the script, and
thanks for the help,
cheers,
Paul Williams

its cooling down in Montana and Elk season is here !!

vwphillips
09-03-2012, 10:10 AM
to add persistence and reset


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
#root {
position:absolute;
height:300px;
width:300px;
background-color:#F4F4F4;
border:1px solid #333;
}

#handle {
margin:2px;
padding:2px;
width: 98%;
color:white;
background-color: navy;
font-weight: bold;
}
</style>
<script type="text/javascript">
/*<![CDATA[*/

/**************************************************
* 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,
// parameter 0 = the drag handle (object or object ID name)
// parameter 1 = the drag root (object or object ID name)
// parameter 2 = the number of days to restore the last position (number, default = no persistence)
init : function(o, oRoot, days, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o=document.getElementById(o)||o;
oRoot=document.getElementById(oRoot)||oRoot;
o.onmousedown = Drag.start;

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

o.root = oRoot && oRoot != null ? oRoot : o ;
o.days=typeof(days)=='number'?days:-1;
var xy=this.cookie?this.cookie(o.id+'='):null;
if (xy&&o.days>0){
xy=xy.split(',');
o.root.style.left=xy[0]+'px';
o.root.style.top=xy[1]+'px';
}
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.srt=[o.root.style.left,o.root.style.top];

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;
if (Drag.obj.id){
document.cookie=Drag.obj.id+'='+[nx,ny]+';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/';
}
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;
},

cookie:function(nme){
var re=new RegExp(nme+'[^;]+','i');
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split("=")[1];
}
return null
},

reset:function(id){
obj=document.getElementById(id);
if (obj&&obj.srt){
obj.root.style.left=obj.srt[0];
obj.root.style.top=obj.srt[1];
}
},

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;
}
};

/*]]>*/
</script>
</head>

<body>

<input type="button" name="" value="Reset" onmouseup="Drag.reset('handle')"/>
<div id="root" style="left:50px; top:100px;">
<div id="handle">Handle</div>
Some text
</div>

<script language="javascript">
// parameter 0 = the drag handle (object or object ID name)
// parameter 1 = the drag root (object or object ID name)
// parameter 2 = the number of days to restore the last position (number, default = no persistence)
Drag.init('handle','root',1);


</script>

</body>

</html>

Paul Williams
09-03-2012, 04:18 PM
Vic,
thank you so much.
your script works great.
i will donate to OperationSmile today !!

i'm not to the point yet where i understand all that you did, but i do understand a fair amount.
got it all working just fine, save for the reset button.

the "reset" button works a bit strange.
as is: lets say that element-1 originates at position (0,0), and you drag it to position (5,9);
now you hit the reset button without reloading the page, element-1 returns to position (0,0);
ok thats fine,

but, do all that again, only reload the page before you hit the reset button........
element-1 originates at position (0,0), and you drag it to position (5,9);
now reload the page; element-1 stays put at position (5,9);
now drag element-1 to position (22,77);
and tap the reset button --->> element-1 returns to position (5,9);
hence, the position of (5,9) is now the original position, not the actual original position of (0,0)

so what i'm trying to do is preserve the original position of the element (where ever that happens to be) as the "original position" that i want the element to return to upon hitting the reset button.
let's say that element-1 has an original position of (0,0), then no matter how many times i reload the page and/or move element-1 around the page and reload some more, if i hit "reset" for element-1, then element-1 jumps back to its original position of (0,0).

how would i get the original position of an element and preserve it, and use that to always return or "park" itself upon reseting?

my good friend Lloyd Brown was the Archery Coach for Great Britain, i was hoping for a win or any medal for you guys and girls, but it didnt' happen.
they got close. you all have a great coach and some really great archers, keep it up.

thanks again, i'm greatly indebted.
Paul Williams

ps. what books would you recommend for learning more about the code you used in this script?
i've been using/reading/studying The Missing Manuals for most all, but haven't seen any of the code you used in my books.

djr33
09-03-2012, 06:39 PM
ps. what books would you recommend for learning more about the code you used in this script?
i've been using/reading/studying The Missing Manuals for most all, but haven't seen any of the code you used in my books. Books are useful for learning the fundamentals, such as how to read blocks of code. But beyond that, personally (and I think many others would agree) hands-on practice is really the way to go. Code is somewhere between logic and art, and at some point you'll move beyond what a book can offer. Tutorials (usually online tutorials) are a good way to expand beyond books because they'll cover specific topics (whatever you're interested in) and often include somewhat more creative code than the basics covered in a book.
Personally I find the best way to learn is to pick a project (with a reasonable goal) and slowly work toward completing that project. You'll practice the basics and figure out some new things along the way.

vwphillips
09-04-2012, 08:43 AM
if you are using persistence the div will be restored to the last moved position