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[*/
.dock {
width:100px;height:200px;border:solid black 1px;float:left;margin-Left:10px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Drag and Drop (19-August-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
// To Drag and drop an element.
// The drag may be executed from the draggable object or a nested element(drag panel)
// Minimum and maximum drag limits may be specified for both 'X' and 'Y' coordinates.
// Specified functions may be called on mousedown, move or mouse up of the object.
//
// There may be as many applications as required on a page.
// ****** Application Notes
// ***** The HTML and CSS Code
//
// The drag objects position must assigned as 'relative' or absolute'
// and the 'left', top' and 'z-Index' assigned by the drag objects style class or inline style.
// Options allow the use of 'right' and 'bottom' in place of 'left' and top' respectively.
// ***** Initialising the Script
//
// The script would normally initialised by a BODY or window event call assign the instance of the script to a variable.
// e.g.
// var oop=new zxcDrag(document.getElementById('tst'),false,'xy',[0,300,0,250])
// where:
// parameter 1 = the object to activate drag on mousedown. (object)
// parameter 2 = (optional) the object to dragged on mousemove. (object, default to parameter 1 object)
// parameter 3 = (optional) a string containing 'x' to drag x and/or 'y' to drag y. (string, default 'xy')
// the default style positions are 'left' and 'top'
// to use 'right' include 'r', to use 'bottom' include 'b'.
// parameter 4 = (optional) an array defining the minimum and maximum x and y coordinates (array, default [])
// where:
// field 0 = the minimum x cordinate. (digits, null = not set)
// field 1 = the maximum x cordinate. (digits, null = not set)
// field 2 = the minimum y cordinate. (digits, null = not set)
// field 3 = the maximum y cordinate. (digits, null = not set)
// parameter 4 = (optional) a function name to be called on mouseup(see Note 2). (function object)
// parameter 5 = (optional) a function name to be called on mousemove(see Note 2). (function object)
// parameter 6 = (optional) a function name to be called on mousedown(see Note 2). (function object)
// Note 1:
// On mousedown of the object the object z_index is increased by 10.
// On the mouseup the z-Index is restored to the original z-Index.
// Note 2:
// When a function is called the zxcDrag function is passed to the function.
// The drag object may be access by argument[0].dobj, and the event as argument[1].
// e.g.
// function Test(obj,evt){
// alert(obj.dobj);
// alert(evt.type);
// }
// Functional Code Size 2.38K
// ****** Functional Code - NO NEED to Change
function zxcDrag(obj,root,dxy,mm,uf,mf,df){
this.dobj=root?root:obj;
mm=mm||['x','x','y','y'];
dxy=(dxy||'xy').toLowerCase();
this.dx=dxy.indexOf('x')>-1;
this.dy=dxy.indexOf('y')>-1;
this.xmde=dxy.indexOf('r')<0?'left':'right';
this.ymde=dxy.indexOf('b')<0?'top':'bottom';
this.mm=[typeof mm[0]=='number'?mm[0]:-100000,typeof mm[1]=='number'?mm[1]:100000,typeof mm[2]=='number'?mm[2]:-100000,typeof mm[3]=='number'?mm[3]:100000];
this.df=df||false; this.mf=mf||false; this.uf=uf||false;
this.addevt(obj||root,'mousedown','down');
this.addevt(document,'mousemove','move');
this.addevt(document,'mouseup','up');
return this;
}
zxcDrag.prototype.down=function(ev){
if (!this.drag){
document.onselectstart=function(event){ window.event.returnValue=false; };
this.lastX=ev.clientX;
this.lastY=ev.clientY;
this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')+10+'';
this.pos=[zxcLTZ(this.dobj,this.xmde),zxcLTZ(this.dobj,this.ymde)];
this.drag=true;
if (this.df) this.df(this,ev);
}
if (ev.target) ev.preventDefault();
return false;
}
zxcDrag.prototype.move=function(ev){
if (this.drag){
var mx=ev.clientX,my=ev.clientY,x=this.pos[0]+(mx-this.lastX),y=this.pos[1]+(my-this.lastY);
if (this.dx&&x>=this.mm[0]&&x<=this.mm[1]){
this.pos[0]=x*(this.xmde=='left'?1:-1);
this.dobj.style[this.xmde]=this.pos[0]+'px';
this.lastX=mx;
}
if (this.dy&&y>=this.mm[2]&&y<=this.mm[3]){
this.pos[1]=y*(this.ymde=='top'?1:-1);
this.dobj.style[this.ymde]=this.pos[1]+'px';
this.lastY=my;
}
if (this.mf) this.mf(this,ev);
}
if (ev.target) ev.preventDefault();
return false;
}
zxcDrag.prototype.up=function(ev){
if (this.drag){
this.drag=false;
this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')-10+'';
if (this.uf) this.uf(this,ev);
document.onselectstart=null;
}
}
zxcDrag.prototype.addevt=function(o,t,f){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e); };
else o['on'+t]=o[f];
}
}
function zxcLTZ(obj,p){
if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')],10);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()),10);
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function zxcDragDrop(drag,dock){
drag=zxcByClassName(drag);
this.drags=[];
for (var z0=0;z0<drag.length;z0++){
this.drags[z0]=[drag[z0].className.split(' ')[1],drag[z0]];
this.addevt(drag[z0],'mousedown','MseDown',z0);
}
var dobj=drag[0].cloneNode(true);
dobj.style.position='absolute';
dobj.style.left='100px';
dobj.style.top='100px';
dobj.style.visibility='hidden';
document.body.appendChild(dobj);
this.dobj=new zxcDrag(dobj,null,'xy',false,this.MseUp);//,mm,uf,mf,df
this.dobj.oop=this;
dock=zxcByClassName(dock);
this.docks=[];
for (var z1=0;z1<dock.length;z1++){
this.docks[z1]=[dock[z1].className.split(' ')[1],dock[z1]];
}
}
zxcDragDrop.prototype.MseUp=function(dobj){
var drag=this.dobj;
var dragpos=zxcPos(drag);
var dock=this.oop.dock;
var dockpos=zxcPos(dock);
if (dragpos[0]>dockpos[0]&&dragpos[0]<dockpos[0]+dock.offsetWidth-drag.offsetWidth&&dragpos[1]>dockpos[1]&&dragpos[1]<dockpos[1]+dock.offsetHeight-drag.offsetHeight){
dock.appendChild(this.oop.drags[this.oop.nu][1].cloneNode(true));
}
drag.style.visibility='hidden';
}
zxcDragDrop.prototype.MseDown=function(e,nu){
var pos=zxcPos(this.drags[nu][1]);
this.dock=false;
for (var z1=0;z1<this.docks.length;z1++){
if (this.docks[z1][0]==this.drags[nu][0]){
this.dock=this.docks[z1][1];
break;
}
}
if (this.dock){
this.nu=nu;
var dobj=this.dobj.dobj;
dobj.style.left=pos[0]+'px';
dobj.style.top=pos[1]+'px';
dobj.src=this.drags[nu][1].src;
dobj.style.visibility='visible';
this.dobj.down(e);
}
}
zxcDragDrop.prototype.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); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}
function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}
function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
/*]]>*/
</script>
</head>
<body onload="new zxcDragDrop('drag','dock')">
<img class="drag A" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="30" height="30" />
<img class="drag B" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="30" height="30" />
<div class="dock A"></div>
<div class="dock B"></div>
</body>
</html>
if this is the sort of thing you are looking for I can explain
Needed: Drop/Drag Javascript that limits where content can be dragged
Reply With Quote
Bookmarks