<html>
<head>
<style type="text/css">
/*<![CDATA[*/
.drag {
position:absolute;left:100px;top:100px;width:50px;height:50px;background-Color:red;
}
/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/
// Drag and Drop (14-April-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
// ***** 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 = the object to dragged on mousemove. (object, or false to default to parameter 1)
// parameter 3 = (optional) a string containing 'x' to drag x and/or 'y' to drag y. (string, default 'xy')
// 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.17K
// ****** 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?true:false;
this.dy=dxy.indexOf('y')>-1?true:false;
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){
document.onselectstart=function(event){ window.event.returnValue=false; }
this.lastXY=[ev.clientX,ev.clientY];
this.drag=true;
this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')+10+'';
this.pos=[zxcLTZ(this.dobj,'left'),zxcLTZ(this.dobj,'top')];
if (this.df) this.df(this,ev);
if (!window.event) ev.preventDefault();
return false;
}
zxcDrag.prototype.move=function(ev){
if (this.drag){
var mse=[ev.clientX,ev.clientY];
this.pos=[Math.min(Math.max(this.mm[0],this.pos[0]+mse[0]-this.lastXY[0]),this.mm[1]),Math.min(Math.max(this.mm[2],this.pos[1]+mse[1]-this.lastXY[1]),this.mm[3])];
if (this.dx) this.dobj.style.left=this.pos[0]+'px';
if (this.dy) this.dobj.style.top=this.pos[1]+'px';
this.lastXY=mse;
if (this.mf) this.mf(this,ev);
}
if (!window.event) 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,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()));
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
var ds=zxcByClassName('drag')
for (var oop,z0=0;z0<ds.length;z0++){
oop=new zxcDrag(ds[z0],false,'xy',null,DragRemove,null,DragAdd);
}
}
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;
}
var DObjs=[]
function DragAdd(oop,e){
if (e.ctrlKey){
DObjs.push(oop);
oop.drag=false;
}
else {
for (var z0=0;z0<DObjs.length;z0++){
if (DObjs[z0]!=oop) DObjs[z0].down(e);
}
}
}
function DragRemove(oop,e){
if (!e.ctrlKey) DObjs=[];
}
/*]]>*/
</script></head>
<body onload="Init();">
<div class="drag" ></div>
<div class="drag" style="left:300px;"></div>
</body>
</html>