dragdrop.js

ZK 基础介绍 功能操作 模块 结合数据库操作

//script.aculo.us 1.7.0
//(c) 2005-2006 Thomas Fuchs
//(c) 2005-2006 Sammi Williams
if(!window.z_dragdrop_js){
z_dragdrop_js=true;
var Draggables={drags:[],observers:[],register:function(_1){
if(this.drags.length==0){
this.eventMouseUp=this.endDrag.bindAsEventListener(this);
this.eventMouseMove=this.updateDrag.bindAsEventListener(this);
this.eventKeypress=this.keyPress.bindAsEventListener(this);
Event.observe(document,"mouseup",this.eventMouseUp);
Event.observe(document,"mousemove",this.eventMouseMove);
Event.observe(document,"keypress",this.eventKeypress);
}
this.drags.push(_1);
},unregister:function(_2){
this.drags=this.drags.reject(function(d){
return d==_2;
});
if(this.drags.length==0){
Event.stopObserving(document,"mouseup",this.eventMouseUp);
Event.stopObserving(document,"mousemove",this.eventMouseMove);
Event.stopObserving(document,"keypress",this.eventKeypress);
}
},activate:function(_4){
if(_4.options.delay){
this._timeout=setTimeout(function(){
Draggables._timeout=null;
window.focus();
Draggables.activeDraggable=_4;
}.bind(this),_4.options.delay);
}else{
window.focus();
this.activeDraggable=_4;
}
},deactivate:function(){
this.activeDraggable=null;
},updateDrag:function(_5){
if(!this.activeDraggable){
return;
}
var _6=[Event.pointerX(_5),Event.pointerY(_5)];
if(this._lastPointer&&(this._lastPointer.inspect()==_6.inspect())){
return;
}
this._lastPointer=_6;
this.activeDraggable.updateDrag(_5,_6);
},endDrag:function(_7){
if(this._timeout){
clearTimeout(this._timeout);
this._timeout=null;
}
if(!this.activeDraggable){
return;
}
this._lastPointer=null;
this.activeDraggable.endDrag(_7);
this.activeDraggable=null;
},keyPress:function(_8){
if(this.activeDraggable){
this.activeDraggable.keyPress(_8);
}
},addObserver:function(_9){
this.observers.push(_9);
this._cacheObserverCallbacks();
},removeObserver:function(_a){
this.observers=this.observers.reject(function(o){
return o.element==_a;
});
this._cacheObserverCallbacks();
},notify:function(_c,_d,_e){
if(this[_c+"Count"]>0){
this.observers.each(function(o){
if(o[_c]){
o[_c](_c,_d,_e);
}
});
}
if(_d.options[_c]){
_d.options[_c](_d,_e);
}
},_cacheObserverCallbacks:function(){
["onStart","onEnd","onDrag"].each(function(_10){
Draggables[_10+"Count"]=Draggables.observers.select(function(o){
return o[_10];
}).length;
});
}};
var Draggable=Class.create();
Draggable._dragging={};
Draggable.prototype={initialize:function(_12){
var zdd=zk.ie&&arguments[1]&&arguments[1].z_dragdrop;
var _14={handle:false,reverteffect:function(_15,_16,_17){
var _18=_15.style.position;
var dur=Math.sqrt(Math.abs(_16^2)+Math.abs(_17^2))*0.02;
new Effect.Move(_15,{x:-_17,y:-_16,duration:dur,queue:{scope:"_draggable",position:"end"}});
setTimeout(function(){
if(zdd&&_18!="absolute"&&_18!="relative"){
zkau._fixie4drop(_15,_18);
}else{
_15.style.position=_18;
}
},dur*1000+10);
},endeffect:function(_1a){
var _1b=typeof _1a._opacity=="number"?_1a._opacity:1;
new Effect.Opacity(_1a,{duration:0.2,from:0.7,to:_1b,queue:{scope:"_draggable",position:"end"},afterFinish:function(){
Draggable._dragging[_1a]=false;
}});
},zindex:1000,revert:false,scroll:false,scrollSensitivity:20,scrollSpeed:15,snap:false,delay:0};
if(!arguments[1]||typeof arguments[1].endeffect=="undefined"){
Object.extend(_14,{starteffect:function(_1c){
_1c._opacity=Element.getOpacity(_1c);
Draggable._dragging[_1c]=true;
new Effect.Opacity(_1c,{duration:0.2,from:_1c._opacity,to:0.7});
}});
}
var _1d=Object.extend(_14,arguments[1]||{});
this.element=$(_12);
if(_1d.handle&&(typeof _1d.handle=="string")){
this.handle=this.element.down("."+_1d.handle,0);
}
if(!this.handle){
this.handle=$(_1d.handle);
}
if(!this.handle){
this.handle=this.element;
}
if(_1d.scroll&&!_1d.scroll.scrollTo&&!_1d.scroll.outerHTML){
_1d.scroll=$(_1d.scroll);
this._isScrollChild=Element.childOf(this.element,_1d.scroll);
}
if(zk.opera||!_1d.z_dragdrop){
Element.makePositioned(this.element);
}
this.delta=this.currentDelta();
this.options=_1d;
this.dragging=false;
this.eventMouseDown=this.initDrag.bindAsEventListener(this);
Event.observe(this.handle,"mousedown",this.eventMouseDown);
Draggables.register(this);
},destroy:function(){
Event.stopObserving(this.handle,"mousedown",this.eventMouseDown);
Draggables.unregister(this);
},currentDelta:function(){
return ([$int(Element.getStyle(this.element,"left")),$int(Element.getStyle(this.element,"top"))]);
},initDrag:function(_1e){
if(typeof Draggable._dragging[this.element]!="undefined"&&Draggable._dragging[this.element]){
return;
}
if(Event.isLeftClick(_1e)){
var src=Event.element(_1e);
if((tag_name=src.tagName.toUpperCase())&&(tag_name=="INPUT"||tag_name=="SELECT"||tag_name=="OPTION"||tag_name=="BUTTON"||tag_name=="TEXTAREA")){
return;
}
for(var n=src;n&&n!=this.element;n=n.parentNode){
if(Element.getStyle(n,"position")=="absolute"){
return;
}
}
var _21=[Event.pointerX(_1e),Event.pointerY(_1e)];
if(this.options.ignoredrag&&this.options.ignoredrag(this.element,_21)){
return;
}
var pos=Position.cumulativeOffset(this.element);
this.offset=[0,1].map(function(i){
return (_21[i]-pos[i]);
});
Draggables.activate(this);
Event.stop(_1e);
zkau.autoZIndex(src,false,true);
}
},startDrag:function(_24){
zk.disableSelection(document.body);
this.dragging=true;
if(this.options.ghosting){
var _25=true;
if(typeof this.options.ghosting=="function"){
_25=this.options.ghosting(this,true);
}
if(_25){
this._clone=this.element.cloneNode(true);
this.z_orgpos=this.element.style.position;
if(this.z_orgpos!="absolute"){
Position.absolutize(this.element);
}
this.element.parentNode.insertBefore(this._clone,this.element);
}
}
if(this.options.zindex){
this.originalZ=$int(Element.getStyle(this.element,"z-index"));
this.element.style.zIndex=this.options.zindex;
}
if(this.options.scroll){
if(this.options.scroll==window){
var _26=this._getWindowScroll(this.options.scroll);
this.originalScrollLeft=_26.left;
this.originalScrollTop=_26.top;
}else{
this.originalScrollLeft=this.options.scroll.scrollLeft;
this.originalScrollTop=this.options.scroll.scrollTop;
}
}
Draggables.notify("onStart",this,_24);
if(this.options.starteffect){
this.options.starteffect(this.element);
}
},updateDrag:function(_27,_28){
if(!this.dragging){
this.startDrag(_27);
}
Position.prepare();
Draggables.notify("onDrag",this,_27);
this.draw(_28);
if(this.options.change){
this.options.change(this,_28);
}
if(this.options.scroll){
this.stopScrolling();
var p;
if(this.options.scroll==window){
with(this._getWindowScroll(this.options.scroll)){
p=[left,top,left+width,top+height];
}
}else{
p=Position.page(this.options.scroll);
p[0]+=this.options.scroll.scrollLeft+Position.deltaX;
p[1]+=this.options.scroll.scrollTop+Position.deltaY;
p.push(p[0]+this.options.scroll.offsetWidth);
p.push(p[1]+this.options.scroll.offsetHeight);
}
var _2a=[0,0];
if(_28[0]<(p[0]+this.options.scrollSensitivity)){
_2a[0]=_28[0]-(p[0]+this.options.scrollSensitivity);
}
if(_28[1]<(p[1]+this.options.scrollSensitivity)){
_2a[1]=_28[1]-(p[1]+this.options.scrollSensitivity);
}
if(_28[0]>(p[2]-this.options.scrollSensitivity)){
_2a[0]=_28[0]-(p[2]-this.options.scrollSensitivity);
}
if(_28[1]>(p[3]-this.options.scrollSensitivity)){
_2a[1]=_28[1]-(p[3]-this.options.scrollSensitivity);
}
this.startScrolling(_2a);
}
if(navigator.appVersion.indexOf("AppleWebKit")>0){
window.scrollBy(0,0);
}
Event.stop(_27);
},finishDrag:function(_2b,_2c){
this.dragging=false;
zk.enableSelection(document.body);
setTimeout("zk.clearSelection()",0);
if(this.options.ghosting){
var _2d=true;
if(typeof this.options.ghosting=="function"){
_2d=this.options.ghosting(this,false);
}
if(_2d){
if(this.z_orgpos!="absolute"){
Position.relativize(this.element);
this.element.style.position=this.z_orgpos;
}
Element.remove(this._clone);
this._clone=null;
}
}
Draggables.notify("onEnd",this,_2b);
var _2e=[Event.pointerX(_2b),Event.pointerY(_2b)];
var _2f=this.options.revert;
if(_2f&&typeof _2f=="function"){
_2f=_2f(this.element,_2e);
}
var d=this.currentDelta();
if(_2f&&this.options.reverteffect){
this.options.reverteffect(this.element,d[1]-this.delta[1],d[0]-this.delta[0]);
}else{
this.delta=d;
}
if(this.options.zindex){
this.element.style.zIndex=this.originalZ;
}
if(this.options.endeffect){
this.options.endeffect(this.element,_2b);
}
Draggables.deactivate(this);
},keyPress:function(_31){
if(_31.keyCode!=27){
return;
}
this.finishDrag(_31,false);
Event.stop(_31);
},endDrag:function(_32){
if(!this.dragging){
return;
}
this.stopScrolling();
this.finishDrag(_32,true);
Event.stop(_32);
},draw:function(_33){
var pos=Position.cumulativeOffset(this.element);
if(this.options.ghosting){
var r=Position.realOffset(this.element);
pos[0]+=r[0]-Position.deltaX;
pos[1]+=r[1]-Position.deltaY;
}
var d=this.currentDelta();
pos[0]-=d[0];
pos[1]-=d[1];
if(this.options.scroll&&(this.options.scroll!=window&&this._isScrollChild)){
pos[0]-=this.options.scroll.scrollLeft-this.originalScrollLeft;
pos[1]-=this.options.scroll.scrollTop-this.originalScrollTop;
}
var p=[0,1].map(function(i){
return (_33[i]-pos[i]-this.offset[i]);
}.bind(this));
if(this.options.snap){
if(typeof this.options.snap=="function"){
p=this.options.snap(p[0],p[1],this);
}else{
if(this.options.snap instanceof Array){
p=p.map(function(v,i){
return Math.round(v/this.options.snap[i])*this.options.snap[i];
}.bind(this));
}else{
p=p.map(function(v){
return Math.round(v/this.options.snap)*this.options.snap;
}.bind(this));
}
}
}
if(this.z_scrl){
p[0]-=this.z_scrl[0];
p[1]-=this.z_scrl[1];
}
var _3c=this.element.style;
if(typeof this.options.constraint=="function"){
var np=this.options.constraint(this,p);
if(np){
p=np;
}
_3c.left=p[0]+"px";
_3c.top=p[1]+"px";
}else{
if((!this.options.constraint)||(this.options.constraint=="horizontal")){
_3c.left=p[0]+"px";
}
if((!this.options.constraint)||(this.options.constraint=="vertical")){
_3c.top=p[1]+"px";
}
}
if(_3c.visibility=="hidden"){
_3c.visibility="";
}
},stopScrolling:function(){
if(this.scrollInterval){
clearInterval(this.scrollInterval);
this.scrollInterval=null;
Draggables._lastScrollPointer=null;
}
},startScrolling:function(_3e){
if(!(_3e[0]||_3e[1])){
return;
}
this.scrollSpeed=[_3e[0]*this.options.scrollSpeed,_3e[1]*this.options.scrollSpeed];
this.lastScrolled=new Date();
this.scrollInterval=setInterval(this.scroll.bind(this),10);
},scroll:function(){
var _3f=new Date();
var _40=_3f-this.lastScrolled;
this.lastScrolled=_3f;
if(this.options.scroll==window){
with(this._getWindowScroll(this.options.scroll)){
if(this.scrollSpeed[0]||this.scrollSpeed[1]){
var d=_40/1000;
this.options.scroll.scrollTo(left+d*this.scrollSpeed[0],top+d*this.scrollSpeed[1]);
}
}
}else{
this.options.scroll.scrollLeft+=this.scrollSpeed[0]*_40/1000;
this.options.scroll.scrollTop+=this.scrollSpeed[1]*_40/1000;
}
Position.prepare();
Draggables.notify("onDrag",this);
if(this._isScrollChild){
Draggables._lastScrollPointer=Draggables._lastScrollPointer||$A(Draggables._lastPointer);
Draggables._lastScrollPointer[0]+=this.scrollSpeed[0]*_40/1000;
Draggables._lastScrollPointer[1]+=this.scrollSpeed[1]*_40/1000;
if(Draggables._lastScrollPointer[0]<0){
Draggables._lastScrollPointer[0]=0;
}
if(Draggables._lastScrollPointer[1]<0){
Draggables._lastScrollPointer[1]=0;
}
this.draw(Draggables._lastScrollPointer);
}
if(this.options.change){
this.options.change(this);
}
},_getWindowScroll:function(w){
var T,L,W,H;
with(w.document){
if(w.document.documentElement&&documentElement.scrollTop){
T=documentElement.scrollTop;
L=documentElement.scrollLeft;
}else{
if(w.document.body){
T=body.scrollTop;
L=body.scrollLeft;
}
}
if(w.innerWidth){
W=w.innerWidth;
H=w.innerHeight;
}else{
if(w.document.documentElement&&documentElement.clientWidth){
W=documentElement.clientWidth;
H=documentElement.clientHeight;
}else{
W=body.offsetWidth;
H=body.offsetHeight;
}
}
}
return {top:T,left:L,width:W,height:H};
}};
}