| Code
Drag-and-drop programs
var Drag = Class.create ();
Drag.prototype = {
Drag and Drop objects
Initialize:function (drag, options) {
This. Drag = $ (Drag);//drag-and-drop objects
this._x = this._y = 0;//record position of mouse relative drag-and-drop object
This._marginleft = This._margintop = 0;//record margin
Event objects (for binding removal events)
THIS._FM = Bindaseventlistener (this, this. Move);
This._fs = Bind (this, this. Stop);
This. SetOptions (options);
This. Limit =!! This.options.Limit;
This.mxleft = parseint (this.options.mxLeft);
This.mxright = parseint (this.options.mxRight);
This.mxtop = parseint (THIS.OPTIONS.MXTOP);
This.mxbottom = parseint (This.options.mxBottom);
This. Lockx =!! This.options.LockX;
This. Locky =!! This.options.LockY;
This. Lock =!! This.options.Lock;
This.onstart = This.options.onStart;
This.onmove = This.options.onMove;
This.onstop = This.options.onStop;
This._handle = $ (this.options.Handle) | | This. Drag;
This._mxcontainer = $ (this.options.mxContainer) | | Null
This. Drag.style.position = "absolute";
Transparent
if (Isie &&!!! This.options.Transparent) {
Fill drag-and-drop objects
With (This._handle.appendchild (document.createelement ("div")). Style) {
width = height = "100%"; BackgroundColor = "#fff"; Filter = "Alpha (opacity:0)"; fontsize = 0;
}
}
Correction Range
This. Repair ();
addEventHandler (This._handle, "MouseDown", Bindaseventlistener (this), this. Start));
},
Set default Properties
Setoptions:function (options) {
This.options = {//default value
Handle: "",//Set Trigger object (use drag-and-drop object if not set)
limit:false,//whether a range limit is set (useful if the following parameters are true, can be negative)
mxleft:0,//left Limit
mxright:9999,//Right Limit
mxtop:0,//Top Limit
mxbottom:9999,//Bottom Limit
Mxcontainer: "",//specified limit in container
lockx:false,//whether to lock horizontal drag and drop
locky:false,//whether to lock the vertical drag-and-drop
lock:false,//is locked
transparent:false,//is transparent
Onstart:function () {},//occurs when the move starts
Onmove:function () {},//is performed while moving
Onstop:function () {}//execution when end of move
};
Extend (this.options, Options | | {});
},
Ready to drag
Start:function (oevent) {
if (this. Lock) {return;}
This. Repair ();
Record the position of the mouse relative to the drag-and-drop object
this._x = Oevent.clientx-this. Drag.offsetleft;
This._y = Oevent.clienty-this. Drag.offsettop;
Record margin
This._marginleft = parseint (Currentstyle (this. Drag). marginleft) | | 0;
This._margintop = parseint (Currentstyle (this. Drag). margintop) | | 0;
Stop when moving MouseUp when MouseMove
addEventHandler (document, "MouseMove", THIS._FM);
addEventHandler (document, "MouseUp", THIS._FS);
if (Isie) {
Focus lost
addEventHandler (This._handle, "Losecapture", THIS._FS);
Set Mouse capture
This._handle.setcapture ();
}else{
Focus lost
addEventHandler (window, "blur", THIS._FS);
Block default action
Oevent.preventdefault ();
};
Attaching programs
This.onstart ();
},
Correction Range
Repair:function () {
if (this. Limit) {
Correcting error range parameters
This.mxright = Math.max (this.mxright, This.mxleft + this. Drag.offsetwidth);
This.mxbottom = Math.max (This.mxbottom, This.mxtop + this. Drag.offsetheight);
If a container must be set position to relative to relative positioning and set before getting offset
!this._mxcontainer | | Currentstyle (this._mxcontainer). Position = = "Relative" | | (this._mxcontainer.style.position = "relative");
}
},
Drag
Move:function (oevent) {
Determine whether to lock
if (this. Lock) {this. Stop (); Return };
Clear Selection
Window.getselection? Window.getselection (). Removeallranges (): Document.selection.empty ();
Set Move parameters
var ileft = oevent.clientx-this._x, itop = oevent.clienty-this._y;
Set Scope limits
if (this. Limit) {
Set Range parameters
var mxleft = this.mxleft, Mxright = this.mxright, Mxtop = this.mxtop, mxbottom = This.mxbottom;
If the container is set, then the range parameter is corrected
if (!! This._mxcontainer) {
Mxleft = Math.max (mxleft, 0);
Mxtop = Math.max (mxtop, 0);
Mxright = Math.min (Mxright, this._mxcontainer.clientwidth);
Mxbottom = Math.min (Mxbottom, this._mxcontainer.clientheight);
};
Fixed move parameters
ILeft = Math.max (Math.min (ILeft, Mxright-this. drag.offsetwidth), mxleft);
Itop = Math.max (Math.min (Itop, Mxbottom-this. drag.offsetheight), mxtop);
}
Set the location and fix the margin
if (!this. Lockx) {this. Drag.style.left = ileft-this._marginleft + "px"; }
if (!this. Locky) {this. Drag.style.top = itop-this._margintop + "px"; }
Attaching programs
This.onmove ();
},
Stop dragging
Stop:function () {
removing events
removeEventHandler (document, "MouseMove", THIS._FM);
removeEventHandler (document, "MouseUp", THIS._FS);
if (Isie) {
removeEventHandler (This._handle, "Losecapture", THIS._FS);
This._handle.releasecapture ();
}else{
removeEventHandler (window, "blur", THIS._FS);
};
Attaching programs
This.onstop ();
}
}; |
