Results 1 to 5 of 5

Thread: DOM Drag & Drop script::: save new positions for reloading page?

  1. #1
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default DOM Drag & Drop script::: save new positions for reloading page?

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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    to add persistence and reset

    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" 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>
    Last edited by vwphillips; 09-03-2012 at 11:02 AM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    Paul Williams (09-03-2012)

  4. #3
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  6. The Following User Says Thank You to djr33 For This Useful Post:

    Paul Williams (09-03-2012)

  7. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    if you are using persistence the div will be restored to the last moved position
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Replies: 0
    Last Post: 03-12-2010, 06:06 PM
  2. ajax drag and drop save
    By techker in forum JavaScript
    Replies: 5
    Last Post: 11-25-2009, 12:14 AM
  3. Drop and Drag Script but needs to save to a dbase
    By FloridaCarol in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-29-2008, 07:46 PM
  4. DOM Drag & Drop script - Flash Drag Problem
    By rudamaia in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-13-2008, 12:08 PM
  5. 'Saving' positions in the 'Dom Drag & Drop'
    By tp4f in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 09-12-2007, 08:36 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •