jquery Web Element Drag-and-drop plug-in effect and implementation _jquery

Copy Code code as follows:

;(function ($) {
$.fn.extend ({
' Jlzindex ': function () {//Z-index for judging and setting individual dialog boxes
var $dragindex = $ (this);
var arrzindex = new Array ();
for (Var i=0 i < $dragindex. length; i++) {//initialize array element values and set Z-index values in drag-and-drop order
var zidxnum = 10000-i-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 for the current click 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 bit of the array, the other items move back
if (i > 0) {
Arrzindex[i].getid = Arrzindex[i-1].getid;
$ ("#" + Arrzindex[i].getid). CSS ("Z-index", ARRZINDEX[I].ZIDX);
} else{
Arrzindex[i].getid = $ (this). attr ("id");
$ ("#" + Arrzindex[i].getid). CSS ("Z-index", ARRZINDEX[I].ZIDX);
}
}
});
},
"Jldraggable": function (MoD) {//Drag plugin
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; The horizontal distance of the mouse in the dragging area
var mousetop = e.pagey-$drag. Find (". Dragbar")-offset (). Top; The horizontal distance of the mouse in the dragging area
if (model = = "Cfade") {//original position element semitransparent
$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 semitransparent
$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 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 ();
}
$drag. CSS ("left", Dragleft + "px");
$drag. CSS ("top", Dragtop + "px");
} else{
return false;
}
});
});
$ (document). MouseUp (function () {
Draggable = false;
$ (". Dragshadow"). Remove ();
if (model = = "Dfade") {
$drag. Fadeto (0,1);
}
});
}
})
}) (jquery)

Index.html:

Copy Code code as follows:

<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.jldraggable.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#drag1"). Jldraggable (); No parameters, no shadows.
$ ("#drag2"). Jldraggable ("Cfade"); Cfade, defining the original position semitransparent shadow
$ ("#drag3"). Jldraggable ("Dfade"); Dfade, defines a translucent shadow that follows the mouse
$ (". Dragindex"). Jlzindex (); Z-index Processing of multiple windows
});
</script>
<style type= "Text/css" >
. dragtitle{
width:120px;
height:27px;
Background:url (images/drag_01.jpg);
Cursor:move;
}
. dragcontent{
width:120px;
height:73px;
Background:url (images/drag_02.jpg);
line-height:73px;
Text-align:center;
}
#drag1 {
width:120px;
Position:absolute;
left:10px;
top:10px;
}
#drag2 {
width:120px;
Position:absolute;
left:90px;
top:90px;
}
#drag3 {
width:120px;
Position:absolute;
left:170px;
top:170px;
}
</style>
<div id= "Drag1" class= "Dragindex" >
<div class= "Dragbar dragtitle" ></div>
<div class= "Dragcontent" > No parameters </div>
</div>
<div id= "Drag2" class= "Dragindex" >
<div class= "Dragbar dragtitle" ></div>
<div class= "Dragcontent" > in-situ translucent </div>
</div>
<div id= "Drag3" class= "Dragindex" >
<div class= "Dragbar dragtitle" ></div>
<div class= "dragcontent" > Dragging translucent </div>
</div>