SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    save coordinates of moving image

    Hello all, I have the following code taht will allow me to move an image around a page when the mouse is clicked on the image.

    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 runat="server">
        <title>Untitled Page</title>
            <style>
    <!--
    .dragme{position:relative;}
    -->
    </style>
    
    <script language="JavaScript1.2">
    var ie=document.all;
    var nn6=document.getElementById&&!document.all;
    
    var isdrag=false;
    var x,y;
    var dobj;
    
    function movemouse(e)
    {
      if (isdrag)
      {
        dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
        dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
        return false;
      }
    }
    
    function selectmouse(e) 
    {
      var fobj       = nn6 ? e.target : event.srcElement;
      var topelement = nn6 ? "HTML" : "BODY";
    
      while (fobj.tagName != topelement && fobj.className != "dragme")
      {
        fobj = nn6 ? fobj.parentNode : fobj.parentElement;
      }
    
      if (fobj.className=="dragme")
      {
        isdrag = true;
        dobj = fobj;
        tx = parseInt(dobj.style.left+0);
        ty = parseInt(dobj.style.top+0);
        x = nn6 ? e.clientX : event.clientX;
        y = nn6 ? e.clientY : event.clientY;
        document.onmousemove=movemouse;
        return false;
      }
    }
    
    document.onmousedown=selectmouse;
    document.onmouseup=new Function("isdrag=false");
        </script>
        
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <asp:Image id="Image1" runat="server" CssClass="dragme"></asp:Image>
        </div>
        </form>
    </body>
    </html>
    However, when the page is refreshed, the image will be placed back at its origional image. Is there any way of saving the coordinates so that the image will remain in the same place after the refresh?

    Cheers

  2. #2
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    either a cookie or pasing the coordinates in the url as arguments and retrieving the on the onload ...

  3. #3
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    adding the coordinates into the url would work well in my application.

    However, my javascript knowledge is very limited. How can I add the coordinates into the url using javascript?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this:
    Code:
    document.onmouseup = function () {
    	isdrag = false;
    	saveCoords();
    };
    
    function saveCoords() {
    	var img = document.getElementById("Image1");
    	window.location.hash = "top=" + img.offsetTop + "&left=" + img.offsetLeft;
    }
    
    function setCoords() {
    	var img = document.getElementById("Image1");
    	var coords = getItemsFromList(window.location.hash.substring(1), ["top","left"]);
    
    	img.style.top = coords.top + "px";
    	img.style.left = coords.left + "px";
    }
    
    function getItemsFromList(list,items) {
    	if (!items.length) {
    		items = new Array(items);
    	}
    
    	var pairs = list.split("&");
    	var ret = {};
    	
    	for (var i=0; i < items.length; i++) {
    		ret[items[i]] = "";
    		for (var j=0; j < pairs.length; j++) {
    			var bits = pairs[j].split("=");
    			if (bits[0] == items[i]) {
    				if (bits.length > 1) {
    					ret[items[i]] = bits[1];
    				}
    				break;
    			}
    		}
    	}
    	return ret;
    }	
    
    window.onload = setCoords;
    *ninja edited*


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
  •