PDA

View Full Version : Drag and Drop with Clone



axanon
10-29-2013, 03:10 PM
hi there!

i try to figure out, if i can use the DOM drag & drop script (http://www.dynamicdrive.com/dynamicindex11/domdrag/) 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/dragndrop/js_v1/konfigurator1.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! =)

vwphillips
10-30-2013, 11:30 AM
<!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?

axanon
10-30-2013, 12:08 PM
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...

vwphillips
10-30-2013, 02:18 PM
<!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>

axanon
10-30-2013, 02:29 PM
hi vic,

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

vwphillips
10-30-2013, 03:00 PM
<!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>

axanon
10-30-2013, 03:26 PM
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?

vwphillips
10-31-2013, 02:48 PM
background colors or images do no print
use

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

axanon
10-31-2013, 03:04 PM
just awesome - thanks vic!!