Results 1 to 9 of 9

Thread: Drag and Drop with Clone

  1. #1
    Join Date
    Oct 2013
    Location
    Switzerland
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Drag and Drop with Clone

    hi there!

    i try to figure out, if i can use the DOM drag & drop script on the frontsite with a duplicate or clone-script together...

    i want to do some kind of a building set site for a friends furniture.
    i have a drag'n'drop-version online (just to test) - but without the clone-script...:
    http://www.those.ch/zweitform/dragnd...figurator1.htm

    what i want:
    i want to have 'unlimited' tiles to place in the picture above...
    and (if it's possible) i would love to turn this tiles in an 90dg-angle....


    thanks a lot! =)
    Last edited by axanon; 10-30-2013 at 02:29 PM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #dragto {
      position:absolute;left:100px;top:50px;width:500px;height:400px;border:solid red 1px;
    }
    
    #dragfrom {
      position:absolute;left:100px;top:500px;width:500px;height:200px;border:solid red 1px;
    }
    
    .drag {
      position:absolute;left:100px;top:50px;width:100px;height:100px;background-Color:red;
    }
    
    .drag2 {
      position:absolute;left:300px;top:50px;width:100px;height:100px;background-Color:blue;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
     <div id="dragto" >
     </div>
    
     <div id="dragfrom" >
      <div class="drag" ></div>
      <div class="drag drag2" ></div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Drag and Drop (30-October-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcDragDrop={
    
     init:function(op){
      var f=document.getElementById(op.FromID),t=document.getElementById(op.ToID);
      if (f&&t){
       var cs=f.getElementsByTagName('*'),o,z0=0;
       this.lap=op.OverLap!==true;
       for (;z0<cs.length;z0++){
        if ((' '+cs[z0].className+' ').match(' drag ')){
         o={obj:cs[z0],cc:cs[z0].cloneNode(true),to:t,w:this.css(cs[z0],'width'),h:this.css(cs[z0],'height'),tw:this.css(t,'width'),th:this.css(t,'height')};
         this.addevt(o.obj,'mousedown','down',o);
         if (!this.ary){
          this.addevt(document,'mousemove','move');
          this.addevt(document,'mouseup','up');
          this.ary=[];
         }
        }
       }
      }
     },
    
     down:function(e,o){
      document.onselectstart=function(event){ window.event.returnValue=false; }
      this.xy=[e.clientX,e.clientY];
      var p=this.pos(o.obj?o.obj:o.c);
      o.xy=[p[0],p[1]];
      o.obj?o.c=o.cc.cloneNode(true):null;
      o.c.style.position='absolute';
      o.c.style.zIndex='201';
      o.c.style.left=p[0]+'px';
      o.c.style.top=p[1]+'px';
      this.o=o;
      document.body.appendChild(o.c);
      return this.rtn(e);
     },
    
     move:function(e){
      var oop=this,o=oop.o;
      if (o){
       var mse=[e.clientX,e.clientY],x=o.xy[0]+mse[0]-this.xy[0],y=o.xy[1]+mse[1]-this.xy[1],p=oop.pos(o.to),a=oop.ary,z0=0;
       for (;z0<a.length;z0++){
        if (oop.lap&&a[z0]!=o&&Math.abs((x+o.w/2-p[0])-(a[z0].xy[0]+a[z0].w/2))<(o.w/2+a[z0].w/2)&&Math.abs((y+o.h/2-p[1])-(a[z0].xy[1]+a[z0].h/2))<(o.h/2+a[z0].h/2)){
         oop.xy=mse;
         return oop.rtn(e);
        }
       }
       o.xy=[x,y];
       o.c.style.left=o.xy[0]+'px';
       o.c.style.top=o.xy[1]+'px';
       oop.xy=mse;
       return oop.rtn(e);
      }
     },
    
     up:function(){
      var oop=this,o=oop.o,p,a=oop.ary,x,y,z0=0;
      if (o){
       p=this.pos(o.to);
       if (o.xy[0]>p[0]&&o.xy[0]<p[0]+o.tw-o.w&&o.xy[1]>p[1]&&o.xy[1]<p[1]+o.th-o.h){
        o.c.style.zIndex='0';
        x=o.xy[0]-p[0];
        y=o.xy[1]-p[1];
        o.c.style.left=x+'px';
        o.c.style.top=y+'px';
        o.to.appendChild(o.c);
        if (!o.c.zxc){
         o.c.zxc={c:o.c,to:o.to,w:o.w,h:o.h,tw:o.tw,th:o.th};
         oop.addevt(o.c,'mousedown','down',o.c.zxc);
         oop.addevt(o.c,'mouseout','up',o.c.zxc);
         oop.ary.push(o.c.zxc);
        }
        o.c.zxc.xy=[x,y];
       }
       else {
        for (var z0=0;z0<a.length;z0++){
         if (a[z0].c==o.c){
          a.splice(z0,1);
         }
        }
        document.body.removeChild(o.c);
       }
       oop.o=false;
       document.onselectstart=null;
      }
     },
    
     rtn:function(e){
      e.stopPropagation?e.stopPropagation():null;
      window.event?null:e.preventDefault();
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     css:function(o,p){
      return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
     },
    
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](e,p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); }):null;
     }
    
    }
    
    zxcDragDrop.init({
     FromID:'dragfrom', // the unique ID of the drag elements patent DIV. (string)
     ToID:'dragTo',     // the unique ID of the docking DIV.              (string)
     OverLap:false      // true = allow overlap, false = no overlapping.  (boolean, default = false = no overlapping)
    });
    
    /*]]>*/
    </script></body>
    
    </html>
    do you want the tiles to overlap?
    Last edited by vwphillips; 10-30-2013 at 02:20 PM.
    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. #3
    Join Date
    Oct 2013
    Location
    Switzerland
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks!
    i have to do a little workaround with your script... don't get it how to implement your script into mine.

    overap: yes, the tiles should overlap...

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    
    <title>Drag-n-Drop Test v1</title>
    <base href="http://www.those.ch/zweitform/dragndrop/js_v1/"  />
    
    <link href="../Styles/style marc.css" rel="stylesheet" type="text/css">
    <link href="../Styles/style_marc_mobelsite.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    body,td,th {
    	font-size: 16px;
    }
    </style>
    </head>
    <body>
    
    <left>
    <div id="dragto" style="position:relative;width:800px;height:581px;background-Image:url(hintergrund-1.jpg);">
    </div>
    <table width="800" height="26" border="0">
      <tr>
        <th width="615" height="22" align="left" scope="col"><strong>Würfelregalkonfigurator</strong></th>
        <th width="128" scope="col"><h6>Vorschlag drucken</h6></th>
        <th width="38" scope="col"><h6><a title="Print Screen" alt="Print Screen" onClick="window.print();" target="_blank" style="cursor:pointer;">
    
        <img src="print.png" align="top"/></a></h6></th>
      </tr>
    </table>
    Planen und Spielen Sie mit Kombinationen. Ziehen Sie einfach die Elemente ins Bild. Sie können die Skizze <br>
    anschliessend drucken. Viel Spass! (mit F5 löschen Sie die  Auswahl wieder)
    <br>
    <br>
    <br>
    <td><table width="800" border="0" id="dragfrom">
        <tr>
          <th width="243" align="top" valign="middle" scope="col">
    
          <img class="drag" src="box weiss lang.png" alt="" width="215" height="108" align="left" id="box weiss lang-4" style="position:relative;" />
    
          </th>
          <th colspan="2" align="center" valign="middle" scope="col">
    
          <img  class="drag" src="http://www.those.ch/zweitform/dragndrop/js_v1/box%20weiss%20lang.png" alt="" width="215" height="108" align="left" id="box schwarz lang-1" style="position:relative;" />
    
          </th>
          <th width="108" align="center" valign="middle" scope="col"><img  class="drag" src="box braun.png" alt="" width="108" height="108" align="left"  id="box braun-1" style="position:relative;" /></th>
          <th width="108" align="center" valign="middle" scope="col"><img  class="drag" src="box weiss.png" alt="" width="108" height="108" align="left" id="box weiss-4" style="position:relative"; /></th>
          <th width="108" align="center" valign="middle" scope="col"><img  class="drag" src="box schwarz.png" alt="" width="108" height="108" align="left"  id="box schwarz-4" style="position:relative;" />
    
          </th>
        </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;</td>
        <td colspan="2" align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
    
        <td align="center" valign="middle"><img  class="drag" src="box braun lang.png" alt="" width="215" height="108" align="left" id="box braun lang-4" style="position:relative;" /></td>
        <td colspan="2" align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle"><img  class="drag" src="frontrot.png" alt="" width="95" height="95" align="center"  id="frontrot-2" style="position:relative;" /></td>
        <td align="center" valign="middle"><img  class="drag" src="frontbraun.png" alt="" width="95" height="95" align="center"  id="frontbraun-1" style="position:relative"; /></td>
        <td align="center" valign="middle"><img  class="drag" src="frontgrau.png" alt="" width="95" height="95" align="center"  id="frontgrau-3" style="position:relative;" /></td>
        </tr>
      <tr>
        <td colspan="3" valign="top"><p>&nbsp;</p>
          <strong>Preise:</strong>
          <table width="335" border="0">
            <tr>
              <td width="152">Box 36 (36x36x36cm)</td>
              <td width="38">CHF 340.-</td>
              </tr>
            <tr>
              <td>Box 72 (72x36x36cm)</td>
              <td>CHF 390.-</td>
              </tr>
            <tr>
              <td>Türe</td>
              <td>CHF 160.-</td>
              </tr>
            </table>
          <br />
          Die Preise verstehen sich abgeholt im Atelier Zofingen
          <p>&nbsp;</p></td>
        <td colspan="3" align="center" valign="top">&nbsp;</td>
      </tr>
    </table></td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    <td>&nbsp;</td>
    </td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    </center>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Drag and Drop (30-October-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcDragDrop={
    
     init:function(op){
      var f=document.getElementById(op.FromID),t=document.getElementById(op.ToID);
      if (f&&t){
       var cs=f.getElementsByTagName('*'),o,z0=0;
       this.lap=op.OverLap!==true;
       for (;z0<cs.length;z0++){
        if ((' '+cs[z0].className+' ').match(' drag ')){
         o={obj:cs[z0],cc:cs[z0].cloneNode(true),to:t,w:this.css(cs[z0],'width'),h:this.css(cs[z0],'height'),tw:this.css(t,'width'),th:this.css(t,'height')};
         this.addevt(o.obj,'mousedown','down',o);
         if (!this.ary){
          this.addevt(document,'mousemove','move');
          this.addevt(document,'mouseup','up');
          this.ary=[];
         }
        }
       }
      }
     },
    
     down:function(e,o){
      document.onselectstart=function(event){ window.event.returnValue=false; }
      this.xy=[e.clientX,e.clientY];
      var p=this.pos(o.obj?o.obj:o.c);
      o.xy=[p[0],p[1]];
      o.obj?o.c=o.cc.cloneNode(true):null;
      o.c.style.position='absolute';
      o.c.style.zIndex='201';
      o.c.style.left=p[0]+'px';
      o.c.style.top=p[1]+'px';
      this.o=o;
      document.body.appendChild(o.c);
      return this.rtn(e);
     },
    
     move:function(e){
      var oop=this,o=oop.o;
      if (o){
       var mse=[e.clientX,e.clientY],x=o.xy[0]+mse[0]-this.xy[0],y=o.xy[1]+mse[1]-this.xy[1],p=oop.pos(o.to),a=oop.ary,z0=0;
       for (;z0<a.length;z0++){
        if (oop.lap&&a[z0]!=o&&Math.abs((x+o.w/2-p[0])-(a[z0].xy[0]+a[z0].w/2))<(o.w/2+a[z0].w/2)&&Math.abs((y+o.h/2-p[1])-(a[z0].xy[1]+a[z0].h/2))<(o.h/2+a[z0].h/2)){
         oop.xy=mse;
         return oop.rtn(e);
        }
       }
       o.xy=[x,y];
       o.c.style.left=o.xy[0]+'px';
       o.c.style.top=o.xy[1]+'px';
       oop.xy=mse;
       return oop.rtn(e);
      }
     },
    
     up:function(){
      var oop=this,o=oop.o,p,a=oop.ary,x,y,z0=0;
      if (o){
       p=this.pos(o.to);
       if (o.xy[0]>p[0]&&o.xy[0]<p[0]+o.tw-o.w&&o.xy[1]>p[1]&&o.xy[1]<p[1]+o.th-o.h){
        o.c.style.zIndex='0';
        x=o.xy[0]-p[0];
        y=o.xy[1]-p[1];
        o.c.style.left=x+'px';
        o.c.style.top=y+'px';
        o.to.appendChild(o.c);
        if (!o.c.zxc){
         o.c.zxc={c:o.c,to:o.to,w:o.w,h:o.h,tw:o.tw,th:o.th};
         oop.addevt(o.c,'mousedown','down',o.c.zxc);
         oop.addevt(o.c,'mouseout','up',o.c.zxc);
         oop.ary.push(o.c.zxc);
        }
        o.c.zxc.xy=[x,y];
       }
       else {
        for (var z0=0;z0<a.length;z0++){
         if (a[z0].c==o.c){
          a.splice(z0,1);
         }
        }
        document.body.removeChild(o.c);
       }
       oop.o=false;
       document.onselectstart=null;
      }
     },
    
     rtn:function(e){
      e.stopPropagation?e.stopPropagation():null;
      window.event?null:e.preventDefault();
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     css:function(o,p){
      return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
     },
    
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](e,p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); }):null;
     }
    
    }
    
    zxcDragDrop.init({
     FromID:'dragfrom', // the unique ID of the drag elements patent DIV. (string)
     ToID:'dragTo',     // the unique ID of the docking DIV.              (string)
     OverLap:true      // true = allow overlap, false = no overlapping.  (boolean, default = false = no overlapping)
    });
    
    /*]]>*/
    </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/

  5. #5
    Join Date
    Oct 2013
    Location
    Switzerland
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hi vic,

    thanks again... but nothing happens when i paste exactly your code into my html-doc:
    http://www.those.ch/zweitform/dragnd...figurator3.htm

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    
    <title>Drag-n-Drop Test v1</title>
    <base href="http://www.those.ch/zweitform/dragndrop/js_v1/"  />
    
    <link href="../Styles/style marc.css" rel="stylesheet" type="text/css">
    <link href="../Styles/style_marc_mobelsite.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    body,td,th {
    	font-size: 16px;
    }
    </style>
    </head>
    <body>
    
    <left>
    <div id="dragto" style="position:relative;width:800px;height:581px;background-Image:url(hintergrund-1.jpg);">
    </div>
    <table width="800" height="26" border="0">
      <tr>
        <th width="615" height="22" align="left" scope="col"><strong>W�rfelregalkonfigurator</strong></th>
        <th width="128" scope="col"><h6>Vorschlag drucken</h6></th>
        <th width="38" scope="col"><h6><a title="Print Screen" alt="Print Screen" onClick="window.print();" target="_blank" style="cursor:pointer;">
    
        <img src="print.png" align="top"/></a></h6></th>
      </tr>
    </table>
    Planen und Spielen Sie mit Kombinationen. Ziehen Sie einfach die Elemente ins Bild. Sie k�nnen die Skizze <br>
    anschliessend drucken. Viel Spass! (mit F5 l�schen Sie die  Auswahl wieder)
    <br>
    <br>
    <br>
    <td><table width="800" border="0" id="dragfrom">
        <tr>
          <th width="243" align="top" valign="middle" scope="col">
    
          <img class="drag" src="box weiss lang.png" alt="" width="215" height="108" align="left" id="box weiss lang-4" style="position:relative;" />
    
          </th>
          <th colspan="2" align="center" valign="middle" scope="col">
    
          <img  class="drag" src="http://www.those.ch/zweitform/dragndrop/js_v1/box%20weiss%20lang.png" alt="" width="215" height="108" align="left" id="box schwarz lang-1" style="position:relative;" />
    
          </th>
          <th width="108" align="center" valign="middle" scope="col"><img  class="drag" src="box braun.png" alt="" width="108" height="108" align="left"  id="box braun-1" style="position:relative;" /></th>
          <th width="108" align="center" valign="middle" scope="col"><img  class="drag" src="box weiss.png" alt="" width="108" height="108" align="left" id="box weiss-4" style="position:relative"; /></th>
          <th width="108" align="center" valign="middle" scope="col"><img  class="drag" src="box schwarz.png" alt="" width="108" height="108" align="left"  id="box schwarz-4" style="position:relative;" />
    
          </th>
        </tr>
      <tr>
        <td align="center" valign="middle">&nbsp;</td>
        <td colspan="2" align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
    
        <td align="center" valign="middle"><img  class="drag" src="box braun lang.png" alt="" width="215" height="108" align="left" id="box braun lang-4" style="position:relative;" /></td>
        <td colspan="2" align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle"><img  class="drag" src="frontrot.png" alt="" width="95" height="95" align="center"  id="frontrot-2" style="position:relative;" /></td>
        <td align="center" valign="middle"><img  class="drag" src="frontbraun.png" alt="" width="95" height="95" align="center"  id="frontbraun-1" style="position:relative"; /></td>
        <td align="center" valign="middle"><img  class="drag" src="frontgrau.png" alt="" width="95" height="95" align="center"  id="frontgrau-3" style="position:relative;" /></td>
        </tr>
      <tr>
        <td colspan="3" valign="top"><p>&nbsp;</p>
          <strong>Preise:</strong>
          <table width="335" border="0">
            <tr>
              <td width="152">Box 36 (36x36x36cm)</td>
              <td width="38">CHF 340.-</td>
              </tr>
            <tr>
              <td>Box 72 (72x36x36cm)</td>
              <td>CHF 390.-</td>
              </tr>
            <tr>
              <td>T�re</td>
              <td>CHF 160.-</td>
              </tr>
            </table>
          <br />
          Die Preise verstehen sich abgeholt im Atelier Zofingen
          <p>&nbsp;</p></td>
        <td colspan="3" align="center" valign="top">&nbsp;</td>
      </tr>
    </table></td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    <td>&nbsp;</td>
    </td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    <td>&nbsp;</td>
    <br>
    <br>
    </center>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Drag and Drop (30-October-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcDragDrop={
    
     init:function(op){
      var f=document.getElementById(op.FromID),t=document.getElementById(op.ToID);
      if (f&&t){
       var cs=f.getElementsByTagName('*'),o,z0=0;
       this.lap=op.OverLap!==true;
       for (;z0<cs.length;z0++){
        if ((' '+cs[z0].className+' ').match(' drag ')){
         o={obj:cs[z0],cc:cs[z0].cloneNode(true),to:t,w:cs[z0].offsetWidth,h:cs[z0].offsetHeight,tw:t.offsetWidth,th:t.offsetHeight};
         this.addevt(o.obj,'mousedown','down',o);
         if (!this.ary){
          this.addevt(document,'mousemove','move');
          this.addevt(document,'mouseup','up');
          this.ary=[];
         }
        }
       }
      }
     },
    
     down:function(e,o){
      document.onselectstart=function(event){ window.event.returnValue=false; }
      this.xy=[e.clientX,e.clientY];
      var p=this.pos(o.obj?o.obj:o.c);
      o.xy=[p[0],p[1]];
      o.obj?o.c=o.cc.cloneNode(true):null;
      o.c.style.position='absolute';
      o.c.style.zIndex='201';
      o.c.style.left=p[0]+'px';
      o.c.style.top=p[1]+'px';
      this.o=o;
      document.body.appendChild(o.c);
      return this.rtn(e);
     },
    
     move:function(e){
      var oop=this,o=oop.o;
      if (o){
       var mse=[e.clientX,e.clientY],x=o.xy[0]+mse[0]-this.xy[0],y=o.xy[1]+mse[1]-this.xy[1],p=oop.pos(o.to),a=oop.ary,z0=0;
       for (;z0<a.length;z0++){
        if (oop.lap&&a[z0]!=o&&Math.abs((x+o.w/2-p[0])-(a[z0].xy[0]+a[z0].w/2))<(o.w/2+a[z0].w/2)&&Math.abs((y+o.h/2-p[1])-(a[z0].xy[1]+a[z0].h/2))<(o.h/2+a[z0].h/2)){
         oop.xy=mse;
         return oop.rtn(e);
        }
       }
       o.xy=[x,y];
       o.c.style.left=o.xy[0]+'px';
       o.c.style.top=o.xy[1]+'px';
       oop.xy=mse;
       return oop.rtn(e);
      }
     },
    
     up:function(){
      var oop=this,o=oop.o,p,a=oop.ary,x,y,z0=0;
      if (o){
       p=this.pos(o.to);
       if (o.xy[0]>p[0]&&o.xy[0]<p[0]+o.tw-o.w&&o.xy[1]>p[1]&&o.xy[1]<p[1]+o.th-o.h){
        o.c.style.zIndex='0';
        x=o.xy[0]-p[0];
        y=o.xy[1]-p[1];
        o.c.style.left=x+'px';
        o.c.style.top=y+'px';
        o.to.appendChild(o.c);
        if (!o.c.zxc){
         o.c.zxc={c:o.c,to:o.to,w:o.w,h:o.h,tw:o.tw,th:o.th};
         oop.addevt(o.c,'mousedown','down',o.c.zxc);
         oop.addevt(o.c,'mouseout','up',o.c.zxc);
         oop.ary.push(o.c.zxc);
        }
        o.c.zxc.xy=[x,y];
       }
       else {
        for (var z0=0;z0<a.length;z0++){
         if (a[z0].c==o.c){
          a.splice(z0,1);
         }
        }
        document.body.removeChild(o.c);
       }
       oop.o=false;
       document.onselectstart=null;
      }
     },
    
     rtn:function(e){
      e.stopPropagation?e.stopPropagation():null;
      window.event?null:e.preventDefault();
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     css:function(o,p){
      return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
     },
    
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](e,p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); }):null;
     }
    
    }
    
    zxcDragDrop.init({
     FromID:'dragfrom', // the unique ID of the drag elements patent DIV. (string)
     ToID:'dragto',     // the unique ID of the docking DIV.              (string)
     OverLap:true      // true = allow overlap, false = no overlapping.  (boolean, default = false = no overlapping)
    });
    
    /*]]>*/
    </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/

  7. #7
    Join Date
    Oct 2013
    Location
    Switzerland
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    W.O.W.
    working like a chram! thank you so much...

    one last question (for the moment):
    when i hit the print-button, it will not print the background-image - why this?

  8. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    background colors or images do no print
    use
    Code:
    <div id="dragto" style="position:relative;width:800px;height:581px;">
     <img src="hintergrund-1.jpg" style="position:absolute;lrft:0px;top:0px;width:800px;height:581px;"/>
    </div>
    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/

  9. #9
    Join Date
    Oct 2013
    Location
    Switzerland
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    just awesome - thanks vic!!

Similar Threads

  1. 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
  2. Integrating Drag & Drop w/ Drop Down menu
    By weirddemon in forum JavaScript
    Replies: 3
    Last Post: 05-10-2008, 05:25 AM
  3. Drag and drop
    By Toby3 in forum JavaScript
    Replies: 3
    Last Post: 02-14-2008, 02:37 AM
  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. Drag and drop photos from drop down menu
    By swtgoddess in forum JavaScript
    Replies: 0
    Last Post: 02-28-2006, 04:19 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
  •