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"> </td>
<td colspan="2" align="center" valign="middle"> </td>
<td align="center" valign="middle"> </td>
<td align="center" valign="middle"> </td>
<td align="center" valign="middle"> </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"> </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> </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> </p></td>
<td colspan="3" align="center" valign="top"> </td>
</tr>
</table></td>
<br>
<br>
<td> </td>
<br>
<br>
<td> </td>
<br>
<br>
<td> </td>
</td>
<br>
<br>
<td> </td>
<br>
<br>
<td> </td>
<br>
<br>
<td> </td>
<br>
<br>
<td> </td>
<br>
<br>
<td> </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>
Drag and Drop with Clone
Reply With Quote
Bookmarks