Results 1 to 3 of 3

Thread: Need help combining multiple scripts. DOM Drag & Drop script + 2 Others.

  1. #1
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default Need help combining multiple scripts. DOM Drag & Drop script + 2 Others.

    1) Script Title: DOM Drag & Drop script

    2) Script URL (on DD):
    DOM Drag & Drop script (not in use currently): http://www.dynamicdrive.com/dynamicindex11/domdrag/

    Additional Scripts:
    Genie-like list items animation (In Use, Modified) http://codepen.io/mishunov/pen/hgfou
    Drag and Drop JavaScript 1st Example (not in use currently): http://www.webreference.com/programm...mn2/index.html

    My Website:
    http://classfind.ca/draganddrop.php

    3) Describe problem: I would like to add the DOM Drag & Drop script to my website in order to drag a room # over to the box on the right. Currently you can click on a room # and it will move over to the box on the right, I want this same effect but with the drag and drop script added. The third link I posted titled "Drag and Drop JavaScript 1st Example" is what I'm hoping to accomplish.

    I would also like to limit the amount of room # links that can be added to the 'Landing zone' box so that it does not overflow.

    Also, I would like to add in a cookie to save the user session, as solved before in this thread here: http://www.dynamicdrive.com/forums/s...reloading-page . Along with having a reset feature (button) as well.

    Last thing..I'm looking for a way to redo the effect of adding the room # to one side. For example if you could click on the room # once its in the 'Landing zone' it would return to the list on the left.
    Thanks, will maybe need to bring this thread over to the General Paid Work Requests forum since its asking for a few things.

    Edit: So I think I'm making some progress with the drag and drop feature, using a script similar to the one found from the blog post here: http://blog.tool-man.org/2005/04/15/...ween-lists/12/ . Am still unsure how to reset the lists or how to click to send them among other things.
    Last edited by GSimon; 09-24-2012 at 09:34 PM.

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

    Default

    Bump?

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

    Default

    if you are looking for a general purpose drag and dock script

    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">
    /*<![CDATA[*/
    .drag {
     position: relative;
     width: 100px;
     height: 100px;
     background-color: black;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -khtml-user-select: none;
     user-select: none;
     cursor: default;
     display:inline-block;
     }
     #one{background: red;}
     #two{background: blue;}
     #four{background: magenta;}
    #zone{
       border:1px dashed black;
       width:450px;
       height:200px;
    
     }
    /*]]>*/
    </style>
    
    </head>
    
    <body>
       <img class="drag" src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" alt="img" />
       <img class="drag" src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" alt="img" />
       <img class="drag" src="http://www.vicsjavascripts.org.uk/StdImages/3.gif" alt="img" />
       <br><br>
       <div id="zone"></div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Drag Drop (03-May-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcDragDrop(o){
     var cls=o.DragClass,id=o.DropZoneID,z=document.getElementById(id),d=o.CookieDays,o=this,els=o.bycls(document,cls),c,a,ary=[],d=typeof(d)=='number'?d:-1,ck=d>0?o.cookie(id).split('#'):[],z0=0,z0a,z1=0;
     for (;z0<els.length;z0++){
      c=els[z0].cloneNode(true);
      c.style.position='absolute';
      c.style.zIndex='101';
      a=document.createElement('A');
      els[z0].parentNode.insertBefore(a,els[z0]);
      a=[els[z0],c,a,ary.length];
      o.addevt(els[z0],'mousedown','down',a);
      for (z0a=0;z0a<ck.length;z0a++){
       if (ck[z0a]==ary.length){
        ck[z0a]=els[ck[z0a]];
       }
      }
      ary.push(a);
     }
     o.z=z;
     o.id=id;
     o.cls=cls;
     o.days=d;
     o.ary=ary;
     o.addevt(document,'mousemove','move');
     o.addevt(document,'mouseup','up');
     for (;z1<ck.length;z1++){
      if (o.z&&typeof(ck[z1])=='object'){
       o.z.appendChild(ck[z1]);
      }
     }
    }
    
    zxcDragDrop.prototype={
    
     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;
     },
    
     down:function(e,a){
      var p=this.pos(a[0]);
      a[1].style.left=p[0]+'px';
      a[1].style.top=p[1]+'px';
      document.body.appendChild(a[1]);
      a[0].style.visibility='hidden';
      this.drag=a
      this.p=p;
      this.xy=[e.clientX,e.clientY];
      return this.rtn(e)
     },
    
     move:function(e){
      if (this.drag){
       var a=this.drag,xy=[e.clientX,e.clientY];
       a[1].style.left=this.p[0]+xy[0]-this.xy[0]+'px';
       a[1].style.top=this.p[1]+xy[1]-this.xy[1]+'px';
       return this.rtn(e)
      }
     },
    
     rtn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     up:function(e){
      var o=this,a=o.drag,z=o.z,ud=false,els,s='',z0=0,z0a;
      if (a){
       if (z){
        var p=o.pos(z),x=parseInt(a[1].style.left),y=parseInt(a[1].style.top);
        ud=x>p[0]&&x<p[0]+z.offsetWidth-a[1].offsetWidth&&y>p[1]&&y<p[1]+z.offsetHeight-a[1].offsetHeight
       }
       !ud?a[2].parentNode.insertBefore(a[0],a[2]):z.appendChild(a[0]);
       a[0].style.visibility='visible';
       a[1].style.top='-3000px';
       els=z?this.bycls(o.z,o.cls):[];
       for (;z0<els.length;z0++){
        for (z0a=0;z0a<o.ary.length;z0a++){
         if (els[z0]==o.ary[z0a][0]){
          s+=o.ary[z0a][3]+'#';
         }
        }
       }
       document.cookie=o.id+'='+s+';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/';
       o.drag=false;
      }
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'=[^;]+','i');
      return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:'';
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     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); });
      }
     }
    
    }
    
    new zxcDragDrop({
     DragClass:'drag',  // the common class name of the 'draggable' elements.    (string)
     DropZoneID:'zone', // the unique ID name of the drop zone element.          (string)
     CookieDays:1       // the number of days to restore the drop zone elements. (number)
     });
    
    /*]]>*/
    </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. Drag and Drop scripts
    By deltalady26 in forum Other
    Replies: 0
    Last Post: 03-23-2010, 08:14 AM
  2. Using a drag and drop script with a drop down menu
    By weirddemon in forum JavaScript
    Replies: 2
    Last Post: 05-12-2008, 06:31 AM
  3. 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
  4. Help with Drag/Drop script
    By mburt in forum JavaScript
    Replies: 10
    Last Post: 08-05-2006, 07:09 PM
  5. Drag and Drop script
    By Nic in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 05-21-2005, 09:55 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
  •