I optimized and modified a JS drag class on the Internet, and added the effect of translucent display when dragging. Http://www.jb51.net/article/16122.htm
Note: For details about the Cminfo class in this document, refer:
Http://www.jb51.net/article/18760.htm
Copy codeThe Code is as follows:
// ********************************** Start of the function at the mobile layer * **************************************** **
// It is easy to generate a drag layer. (If an array represents partial drag, arr [0] represents the drag layer, and arr [1] represents the whole)
// New divDrag (['test'], [getObject ('test31'), getObject ('test3')], getObject ('test1 '), getObject ('test2'), [getObject ('test41'), getObject ('test4')]);
// Remember the layer position with the drag attribute: absolute;
Array. prototype. extend = function (C) {for (var B = 0, A = C. length; B <A; B ++) {this. push (C [B]);} return this ;}
Function divDrag ()
{
Var A, B, gCn;
Var zIndex = 1;
This. dragStart = function (e)
{
E = e | window. event;
If (e. which & (e. which! = 1) | (e. button & (e. button! = 1) {return ;}
Var pos = this. gPos;
GCn = this. parent | this;
If (document. defaultView)
{
_ Top = document. defaultView. getComputedStyle (gCn, null). getPropertyValue ("top ");
_ Left = document. defaultView. getComputedStyle (gCn, null). getPropertyValue ("left ");
}
Else
{
If (gCn. currentStyle)
{
_ Top = gCn. currentStyle ["top"];
_ Left = gCn. currentStyle ["left"];
}
}
Pos. ox = (e. pageX | (e.clientx?document.doc umentElement. scrollLeft)-parseInt (_ left );
Pos. oy = (e. pageY | (e.clienty?document.doc umentElement. scrollTop)-parseInt (_ top );
If (!! A)
{
If (document. removeEventListener)
{
Document. removeEventListener ("mousemove", A, false );
Document. removeEventListener ("mouseup", B, false );
}
Else
{
Document. detachEvent ("onmousemove", );
Document. detachEvent ("onmouseup", B );
}
}
A = this. dragMove. create (this );
B = this. dragEnd. create (this );
If (document. addEventListener)
{
Document. addEventListener ("mousemove", A, false );
Document. addEventListener ("mouseup", B, false );
}
Else
{
Document. attachEvent ("onmousemove", );
Document. attachEvent ("onmouseup", B );
}
GCn. style. zIndex = (++ zIndex );
}
This. dragMove = function (e)
{
E = e | window. event;
Var pos = this. gPos;
GCn = this. parent | this;
GCn. style. top = (e. pageY | (e.clientyuncdocument.doc umentElement. scrollTop)-parseInt (pos. oy) + 'px ';
GCn. style. left = (e. pageX | (e.clientx?document.doc umentElement. scrollLeft)-parseInt (pos. ox) + 'px ';
Try {if (CMInfo. bs_Name = 'ie ') {gCn. style. filter = "alpha (opacity = 70)";} else {gCn. style. opacity = "0.7" ;}} catch (e ){}
This. stop (e );
}
This. dragEnd = function (e)
{
Var pos = this. gPos;
E = e | window. event;
If (e. which & (e. which! = 1) | (e. button & (e. button! = 1) {return };
GCn = this. parent | this;
If (!! (This. parent) {this. style. backgroundColor = pos. color ;}
Try {if (CMInfo. bs_Name = 'ie ') {gCn. style. filter = "alpha (opacity = 100)";} else {gCn. style. opacity = 1 ;}} catch (e ){}
If (document. removeEventListener)
{
Document. removeEventListener ("mousemove", A, false );
Document. removeEventListener ("mouseup", B, false );
}
Else
{
Document. detachEvent ("onmousemove", );
Document. detachEvent ("onmouseup", B );
}
A = null;
B = null;
GCn. style. zIndex = (++ zIndex );
This. stop (e );
}
This. shiftColor = function ()
{
This. style. backgroundColor = "# EEEEEE ";
}
This. position = function (e)
{
Var t = e. offsetTop;
Var l = e. offsetLeft;
While (e = e. offsetParent)
{
T + = e. offsetTop;
L + = e. offsetLeft;
}
Return {x: l, y: t, ox: 0, oy: 0, color: null}
}
This. stop = function (e)
{
If (e. stopPropagation) {e. stopPropagation ();} else {e. cancelBubble = true ;}
If (e. preventDefault) {e. preventDefault ();} else {e. returnValue = false ;}
}
This. create = function (bind)
{
Var B = this;
Var A = bind;
Return function (e) {return B. apply (A, [e]);}
}
This. dragStart. create = this. create;
This. dragMove. create = this. create;
This. dragEnd. create = this. create;
This. shiftColor. create = this. create;
This. initialize = function ()
{
For (var A = 0, B = arguments. length; A <B; A ++)
{
C = arguments [A];
If (! (C. push) {C = [C];}
GC = (typeof (C [0]) = 'object ')? C [0] :( typeof (C [0]) = 'string '? GetObject (C [0]): null );
If (! GC) {continue };
GC. gPos = this. position (gC );
GC. dragMove = this. dragMove;
GC. dragEnd = this. dragEnd;
GC. stop = this. stop;
If (!! C [1])
{
GC. parent = C [1];
GC. gPos. color = gC. style. backgroundColor;
}
If (gC. addEventListener)
{
GC. addEventListener ("mousedown", this. dragStart. create (gC), false );
If (!! C [1]) {gC. addEventListener ("mousedown", this. shiftColor. create (gC), false );}
}
Else
{
GC. attachEvent ("onmousedown", this. dragStart. create (gC ));
If (!! C [1]) {gC. attachEvent ("onmousedown", this. shiftColor. create (gC ));}
}
}
}
This. initialize. apply (this, arguments );
}
// ********************************** Function termination at the mobile layer * **************************************** **