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>
Need help combining multiple scripts. DOM Drag & Drop script + 2 Others.
Reply With Quote
Bookmarks