Jquery web page element drag plug-in effect and implementation _ jquery

Effect Description: in combination with the existing css style, after loading the plug-in, the webpage elements can be dragged freely in the window, and the effect options of the original position translucent and drag translucent can be selected as needed. In addition, when there are multiple drag-and-drop elements on the page, you can load another plug-in for setting the z-index to simulate the windows window click pin effect.

The Code is as follows:

; (Function ($ ){
$. Fn. extend ({
"Jlzindex": function () {// used to determine and set the z-index of each dialog box
Var $ dragindex = $ (this );
Var arrzindex = new array ();
For (var I = 0; I <$ dragindex. length; I ++) {// initialize the array element value and set the z-index value in the drag-and-drop order.
Var zidxnum = 10000-I-2;
Arrzindex [I] = {"getid": "drag" + ($ dragindex. length-I), "zidx": zidxnum };
$ ("# Drag" + ($ dragindex. length-I ?#.css ("z-index", zidxnum );
}
$ Dragindex. mousedown (function (){
Var I = 0;
Var dindex = 0;
While (arrzindex [I]) {// find the subscript of the current click item in the array
If (arrzindex [I]. getid = $ (this). attr ("id") {dindex = I ;}
I ++;
}
For (var I = dindex; I> = 0; I --) {// move the click item to the first place of the array, and move other items back
If (I> 0 ){
Arrzindex [I]. getid = arrzindex [I-1]. getid;
$ ("#" + Arrzindexpolici#.getid#.css ("z-index", arrzindex [I]. zidx );
} Else {
Arrzindex [I]. getid = $ (this). attr ("id ");
$ ("#" + Arrzindexpolici#.getid#.css ("z-index", arrzindex [I]. zidx );
}
}
});
},
"Jldraggable": function (mod) {// drag the plug-in
Var model = mod;
Var draggable = false;
Var $ drag = $ (this );
$ Drag. find (". dragbar"). mousedown (function (e ){
Draggable = true;
Var mouseleft = e. pagex-$ drag. find (". dragbar"). offset (). left; // horizontal distance between the mouse and the drag area
Var mousetop = e. pagey-$ drag. find (". dragbar"). offset (). top; // horizontal distance between the mouse and the drag area
If (model = "cfade") {// The original position element is translucent.
$ Drag. clone (false). appendto ("body"). addclass ("dragshadow" ).fadeto(0, 0.2).css ("z-index", parseint($drag.css ("z-index")-1 );
} Else if (model = "dfade") {// follow the mouse element translucent
$ Drag. clone (false). appendto ("body"). addclass ("dragshadow" ).css ("z-index", parseint($drag.css ("z-index")-1 );
$ Drag. fadeto (0, 0.2 );
}
$ (Document). mousemove (function (e ){
If (draggable ){
Var winwidth = $ (window). width ();
Var winheight = $ (window). height ();
Var dragleft = e. pagex-mouseleft;
Var dragtop = e. pagey-mousetop;
// The drag-and-drop box cannot exceed the window boundary.
If (dragleft <0) {dragleft = 0 ;}
If (dragleft + $ drag. width ()> winwidth ){
Dragleft = winwidth-$ drag. width ();
}
If (dragtop <0) {dragtop = 0 ;}
If (dragtop + $ drag. height ()> winheight ){
Dragtop = winheight-$ drag. height ();
}
Optional drag.css ("left", dragleft + "px ");
Includrag.css ("top", dragtop + "px ");
} Else {
Return false;
}
});
});
$ (Document). mouseup (function (){
Draggable = false;
$ (". Dragshadow"). remove ();
If (model = "dfade "){
$ Drag. fadeto (0, 1 );
}
});
}
})
}) (Jquery)

Index.html:

The Code is as follows: