Copy codeThe Code is as follows: (function ($ ){
$. Fn. extend ({
Mydrag: function (){
Var boxX = 0; // the abscissa of the element in the page
Var boxY = 0; // The ordinate of the element in the page
Var dMouseX = 0; // the abscissa of the mouse position when you press the mouse
Var dMouseY = 0; // The ordinate position of the mouse when you press the mouse
Var mMouseX = 0; // the abscissa of the cursor position when moving the mouse
Var mMouseY = 0; // The ordinate position of the mouse when moving the mouse
Var moveLenX = 0; // The distance between the mouse movement and the horizontal movement.
Var moveLenY = 0; // stores the distance between the mouse and the vertical
Var isMove = false; // whether to drag a helper on the layer"
Var movingX = 0; // move the LEFT value of the element
Var movingY = 0; // move the TOP value of the element
// The rightmost value of the visible area
Var rightest = document.doc umentElement. clientWidth-$ (". top"). parent (). outerWidth ();
// The rightmost value of the visible area
Var bottomest = document.doc umentElement. clientHeight-$ (". top"). parent (). outerHeight ();
// Obtain the coordinates of the mouse position when moving the mouse
Var getMoveMouse = function (move ){
MMouseX = move. pageX;
MMouseY = move. pageY;
}
// Obtain the current position of the element on the page
Var getbox = function (m ){
BoxX = $ (". box"). offset (). left;
BoxY = $ (". box"). offset (). top;
}
// Obtain the coordinates when the mouse is pressed
Var getDownMouse = function (m ){
DMouseX = m. pageX;
DMouseY = m. pageY;
}
// Obtain the distance from the mouse movement
Var getMoveLen = function (){
MoveLenX = mMouseX-dMouseX;
MoveLenY = mMouseY-dMouseY;
}
// When the mouse is UP, close the move, that is, moving the mouse will not move the element;
$ (Document). mouseup (function (){
IsMove = false;
})
// Bind the TOP event of the element
$ (This ).
// Obtain the coordinates of the element and the sitting position of the current mouse when you press it;
Mousedown (function (e ){
Getbox (e );
GetDownMouse (e)
IsMove = true;
}).
// Obtain the moving distance when moving, and set the TOP and LEFT values of the element;
Mousemove (function (e ){
Var $ this = $ (this );
GetMoveMouse (e );
GetMoveLen ();
If (isMove ){
// Prevent elements from moving out of the visible area
// The leftmost browser of the visible area
If (movingX <0 ){
Define this.css ({"left": 0 });
If (movingY <0 ){
Export this.css ({"top": 0 });
} Else if (movingY> bottomest ){
Export this.css ({"top": bottomest });
} Else {
Export this.css ({"top": boxY + moveLenY });
}
}
// The top of the browser in the visible area
Else if (movingY <0 ){
Export this.css ({"top": 0 });
If (movingX> rightest ){
Export this.css ({"left": rightest });
} Else {
Export this.css ({"left": boxX + moveLenX });
}
}
// The rightmost side of the browser in the visible area
Else if (movingX> rightest ){
Export this.css ({"left": rightest });
If (movingY> bottomest ){
Export this.css ({"top": bottomest });
} Else {
Export this.css ({"top": boxY + moveLenY });
}
}
// Bottom of the visible area Browser
Else if (movingY> bottomest ){
Export this.css ({"top": bottomest });
If (movingX <0 ){
Define this.css ({"left": 0 });
} Else {
Export this.css ({"left": boxX + moveLenX });
}
}
// In other cases, that is, in the middle of the visible area
Else {
Export this.css ({"left": boxX + moveLenX, "top": boxY + moveLenY });
}
MovingX = boxX + moveLenX;
MovingY = boxY + moveLenY;
}
})
}
})
}) (JQuery)
Main ideas:
1. How much distance the mouse moves, and how much distance the element moves at the same time, so you need to get the distance to move the mouse;
2. Click and move the mouse to drag the layer. Therefore, you need a "Switch" to enable it when you move and press it. If you move the mouse here, you will move the layer. If this "off", when you move the mouse, the layer will not move together.
3. Obtain the leftmost, rightmost, and rightmost value of the layer element in the visible area of the browser. In addition, when dragging the layer, compare the coordinate values of the current layer with those values if they exceed these values. You cannot drag this direction to minimize or maximum the value.
I think my judgment is a little complicated. How can I simplify it with a high finger?
Download DEMO
