Results 1 to 3 of 3

Thread: Help adding multiple drag and drop objects

  1. #1
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help adding multiple drag and drop objects

    I recently received help from this forum post about DOM Drag and Drop script and I wanted to know how to get many of those boxes.

    I am relatively new to HTML (couple weeks) compared to some people here, and need help!

    How to add more boxes using the Script.

    And how to add a HTTP link to the image.

    <a href="http://www."website".com" > Does not seem to work if i add it before the image.

    The DOM Drag and Drop script was from:

    http://www.dynamicdrive.com/forums/s...reloading-page

    (I removed the reset box)

    I am "HTMLing" this website for personal use. And here is the HTML:

    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>Chris</title>
    <link href="thrColLiqHdr.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    	#root {
    	position: absolute;
    	height: 140px;
    	width: 205px;
    	background-color: #F4F4F4;
    		}
    
    	#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>
    
    <div class="container">
      <div class="header" style="text-align:center;"><div id='cssmenu'>
    <ul>
       <li><a href='index.html'><span>Home</span></a></li>
       <li class='active'><a href='ChrisPG.html'><span>Chris</span></a></li>
       <li><a href='PiaPg.html'><span>Pia</span></a></li>
       <li><a href='KyePg.html'><span>Kye</span></a></li>
       <li><a href='sponsors.html'><span>Sponsors</span></a></li>
       <li><a href='Livechat.html'><span>LiveChat</span></a></li>
       <li><a href='About.html'><span>About</span></a></li>
       <li class='last'><a href='Contact.html'><span>Contact</span></a><br/>
    </li>
    </ul>
      </div>
      </div>
    
    <div id="root" style="left: 163px; top: 230px;">
      <div id="handle">Handle</div>
      <a href="Http://youtube.com.au"><img src="Images/Youtube.jpg" width="208" height="114">
      </a>
    </a>
    </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>


    Btw First post and please help!
    Last edited by Beverleyh; 05-10-2013 at 08:29 AM. Reason: formatting

  2. #2
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by kyero View Post
    I recently received help from this forum post about DOM Drag and Drop script and I wanted to know how to get many of those boxes.

    I am relatively new to HTML (couple weeks) compared to some people here, and need help!

    How to add more boxes using the Script.

    And how to add a HTTP link to the image.

    <a href="http://www."website".com" > Does not seem to work if i add it before the image.

    The DOM Drag and Drop script was from:

    http://www.dynamicdrive.com/forums/s...reloading-page

    (I removed the reset box)

    I am "HTMLing" this website for personal use. And here is the HTML:

    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>Chris</title>
    <link href="thrColLiqHdr.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    	#root {
    	position: absolute;
    	height: 140px;
    	width: 205px;
    	background-color: #F4F4F4;
    		}
    
    	#handle {
    		margin:2px;
    		padding:2px;
    		width: 98%;
    		color:white;
    		background-color: navy;
    		font-weight: bold;
    		}
    		
    </style>
    <script type="text/javascript">
    /*<=!=[=C=D=A=T=A=[*/
    
    /**************************************************
     * 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>
    
    <div class="container">
      <div class="header" style="text-align:center;"><div id='cssmenu'>
    <ul>
       <li><a href='index.html'><span>Home</span></a></li>
       <li class='active'><a href='ChrisPG.html'><span>Chris</span></a></li>
       <li><a href='PiaPg.html'><span>Pia</span></a></li>
       <li><a href='KyePg.html'><span>Kye</span></a></li>
       <li><a href='sponsors.html'><span>Sponsors</span></a></li>
       <li><a href='Livechat.html'><span>LiveChat</span></a></li>
       <li><a href='About.html'><span>About</span></a></li>
       <li class='last'><a href='Contact.html'><span>Contact</span></a><br/>
    </li>
    </ul>
      </div>
      </div>
    
    <div id="root" style="left: 163px; top: 230px;">
      <div id="handle">Handle</div>
      <a href="Http://youtube.com.au"><img src="Images/Youtube.jpg" width="208" height="114">
      </a>
    </a>
    </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>


    Btw First post and please help!
    Fixed by copying

    Code:
    <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>
    <div id="root" style="left: 163px; top: 230px;">
      <div id="handle">Handle</div>
      <a href="Http://youtube.com.au"><img src="Images/Youtube.jpg" width="208" height="114">
      </a>
    </a>
    </div>
    Code:
    <style type="text/css">
    	#root {
    	position: absolute;
    	height: 140px;
    	width: 205px;
    	background-color: #F4F4F4;
    		}
    
    	#handle {
    		margin:2px;
    		padding:2px;
    		width: 98%;
    		color:white;
    		background-color: navy;
    		font-weight: bold;
    		}
    		
    </style>
    And changing their value! All i need now is to click on the the picture and it sends me off to the webpage!


    Then add <a href="Website">
    Last edited by Beverleyh; 05-10-2013 at 11:16 AM. Reason: formatting

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    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>Chris</title>
    <link href="thrColLiqHdr.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .root {
    position: absolute;
    height: 140px;
    width: 205px;
    background-color: #F4F4F4;
    }
    
    .handle {
    margin:2px;
    padding:2px;
    width: 98%;
    color:white;
    background-color: navy;
    font-weight: bold;
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="container">
    <div class="header" style="text-align:center;"><div id='cssmenu'>
    <ul>
    <li><a href='index.html'><span>Home</span></a></li>
    <li class='active'><a href='ChrisPG.html'><span>Chris</span></a></li>
    <li><a href='PiaPg.html'><span>Pia</span></a></li>
    <li><a href='KyePg.html'><span>Kye</span></a></li>
    <li><a href='sponsors.html'><span>Sponsors</span></a></li>
    <li><a href='Livechat.html'><span>LiveChat</span></a></li>
    <li><a href='About.html'><span>About</span></a></li>
    <li class='last'><a href='Contact.html'><span>Contact</span></a><br/>
    </li>
    </ul>
    </div>
    </div>
    
    <div class="root" id="root">
    <div class="handle" id="handle">Handle</div>
    <a href="Http://youtube.com.au"><img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" width="208" height="114"></a>
    </div>
    <div class="root" id="root">
    <a href="Http://youtube.com.au"><img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" width="208" height="114"></a>
    <div class="handle" id="handle">Handle</div>
    </div>
    <div class="root" id="root">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" width="208" height="114">
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Drag Drop (10-May-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcDrag={
    
     init:function(r,h,d){
      var o=this,ds=this.bycls(document,r),d=typeof(d)=='number'?d:-1,xy,z,lft,top,z0=0;
      for (;z0<ds.length;z0++){
       h=this.bycls(ds[z0],h)[0];
       h=h?h:ds[z0];
       z=this.style(ds[z0],'z-Index');
       ds[z0].style.zIndex=isFinite(z*1)?z*1:101;
       xy=o.cookie('zxcdrag'+z0).split(',');
       if (xy[1]){
        ds[z0].style.left=xy[0]+'px';
        ds[z0].style.top=xy[1]+'px';
       }
       lft=o.int(ds[z0],'left'),top=o.int(ds[z0],'top');
       o.addevt(h,'mousedown','down',[ds[z0],'zxcdrag'+z0,[isFinite(lft)?lft:ds[z0].offsetLeft],[isFinite(top)?top:ds[z0].offsetTop]]);
      }
      o.days=d;
      o.addevt(document,'mousemove','move');
      o.addevt(document,'mouseup','up');
     },
    
     down:function(e,a){
      var o=this;
      o.lst?o.lst.style.zIndex=o.int(o.lst,'z-Index')-1:null;
      a[0].style.zIndex=o.int(a[0],'z-Index')+1;
      o.xy=[e.clientX,e.clientY];
      o.drag=a;
      return o.rtn(e);
     },
    
     move:function(e){
      var o=this,d=o.drag,xy=[e.clientX,e.clientY];
      if (d){
       d[2][1]=d[2][0]+xy[0]-o.xy[0];
       o.drag[0].style.left=d[2][1]+'px';
       d[3][1]=d[3][0]+xy[1]-o.xy[1];
       o.drag[0].style.top=d[3][1]+'px';
       return o.rtn(e);
      }
     },
    
     up:function(e){
      var o=this,d=o.drag;
      if (d){
       this.lst=d[0];
       d[2][0]=d[2][1];
       d[3][0]=d[3][1];
       document.cookie=d[1]+'='+[d[2][0],d[3][0]]+';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/';
       o.drag=false;
      }
     },
    
     rtn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     int:function(o,p){
      return parseInt(this.style(o,p));
     },
    
     style:function(o,p){
      if (o.currentStyle){
       return o.currentStyle[p.replace(/-/g,'')];
      }
      return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'[^;]+','i');
      return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:'';
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
      }
     },
    
     bycls:function(obj,cls){
      var els=obj.getElementsByTagName('*'),ary=[],z0=0;
      for (;z0<els.length;z0++){
       if ((' '+els[z0].className+' ').match(' '+cls+' ')){
        ary.push(els[z0]);
       }
      }
      return ary;
     }
    
    }
    /*]]>*/
    </script>
    
    <script language="javascript">
    
    zxcDrag.init('root','handle',1);
    
    </script>
    
    
    </body>
    </html>
    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. Need help combining multiple scripts. DOM Drag & Drop script + 2 Others.
    By GSimon in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-09-2013, 02:18 PM
  2. Drag multiple images
    By Chaim in forum Looking for such a script or service
    Replies: 61
    Last Post: 12-14-2009, 02:21 PM
  3. Replies: 8
    Last Post: 02-04-2009, 08:17 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. line follow objects by drag & drop
    By alim27 in forum JavaScript
    Replies: 0
    Last Post: 01-09-2008, 03:13 PM

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
  •