Jquery-based Drag layout plug-in. For more information, see.
The Code is as follows:
(Function ($ ){
$. Fn. lsMovePanel = function (){
Var id = this. attr ("id ");
Var X = Y = 0;
Var offsetX = offsetY = 0; // absolute position
Var OldIndex = 0; // store the original Index
Var Temp_Li ="
";
Var Move_obj; // the object to be dragged.
$ ("#" + Id + "li"). each (function (I ){
$ (This). attr ("open", "0 ");
// Click
$ (This). bind ("mousedown", function (){
If (event. button = 1 | event. button = 0) {$ (this). attr ("open", "1 ");}
If ($ (this). attr ("open") = "1 "){
Certificate (this).css ({
Cursor: "move ",
Opacity: "0.7"
});
X = event. clientX;
Y = event. clientY;
OffsetX = $ (this). offset (). left;
OffsetY = $ (this). offset (). top;
OldIndex = $ (this). index ();
Certificate (this).css ({
Position: "absolute ",
Left: offsetX,
Top: offsetY
});
$ ("#" + Id + "li"). each (function (I ){
If (I = OldIndex ){
$ (This). after (Temp_Li );
}
})
}
});
// Open the mouse
$ (This). bind ("mouseup", function (){
If (event. button = 1 | event. button = 0) {$ (this). attr ("open", "0 ");}
If ($ (this). attr ("open") = "0 "){
$ ("# Temp_Li"). before ($ (this ));
$ (This). animate ({
Left: $ ("# Temp_Li"). offset (). left,
Top: $ ("# Temp_Li"). offset (). top,
},300, function (){
$ ("# Temp_Li"). remove ();
Certificate (this).css ({
Cursor: "default ",
Opacity: "1 ",
Position: "static"
});
});
$ ("#" + Id + "li"). each (function (I ){
Certificate (this).css ({
"Border-color": "#666666"
});
});
}
});
// Move
$ (This). bind ("mousemove", function (){
If ($ (this). attr ("open") = "1 "){
Var current_X = current_Y = 0;
Current_X = offsetX + event. clientX-X;
Current_Y = offsetY + event. clientY-Y;
Certificate (this).css ({
Position: "absolute ",
Left: current_X,
Top: current_Y
});
Move_obj = this;
$ ("#" + Id + "li"). each (function (I ){
If (I! = OldIndex & $ (this). attr ("id ")! = "Temp_Li "){
Var Deviation = 0;
Var Max_X = $ (this). offset (). left + $ (this). width ()-Deviation;
Var Min_X = $ (this). offset (). left + Deviation;
Var Max_Y = $ (this). offset (). top + $ (this). height ()-Deviation;
Var Min_Y = $ (this). offset (). top + Deviation;
If (event. clientX <Max_X) & (event. clientY + $ (Move_obj ). height ()> Max_Y) & (event. clientY + $ (Move_obj ). height ()> Min_Y) & (event. clientX> Min_X) & (event. clientY <Max_Y )){
Certificate (this).css ({
"Border-color": "# FF7578"
});
// Determine whether to overwrite the object index value before or after
If (OldIndex> $ (this). index ()){
$ ("# Temp_Li"). before ($ (this ));
$ ("# Temp_Li"). remove ();
$ (This). before (Temp_Li );
} Else {
$ ("# Temp_Li"). after ($ (this ));
$ ("# Temp_Li"). remove ();
$ (This). after (Temp_Li );
}
} Else {
Certificate (this).css ({
"Border-color": "#666666"
});
}
}
})
}
});
});
}
}) (JQuery );
Call example:
The Code is as follows:
