jQuery dragging layer (within the visible area)_jquery

Copy code The code is as follows:

(function($){
$.fn.extend( {
mydrag:function(){
var boxX = 0; //The abscissa of the element on the page
var boxY = 0; //The ordinate of the element on the page
var dMouseX = 0; //The abscissa of the mouse position when the mouse is pressed
var dMouseY = 0; //The ordinate of the mouse position when the mouse is pressed
var mMouseX = 0; //The ordinate of the mouse position when the mouse is moved The abscissa of the mouse position
var mMouseY = 0; //The ordinate of the mouse position when moving the mouse
var moveLenX = 0; //Storage of the mouse movement distance, horizontal
var moveLenY = 0 ; //Storage the distance moved by the mouse, vertically
var isMove = false; //An input "switch" for whether to drag the layer
var movingX = 0; //LEFT value of the moving element
var movingY = 0; //TOP value of the moving element
//Rightest value of the visible area
var rightest = document.documentElement.clientWidth - $(".top").parent().outerWidth ();
//The rightmost value of the visual area
var bottomest = document.documentElement.clientHeight - $(".top").parent().outerHeight();
//Get the move The coordinates of the mouse position when the mouse is running
var getMoveMouse = function(move){
mMouseX = move.pageX;
mMouseY = move.pageY;
}
//Get the element on the page The current position in
var getbox = function(m){
boxX = $(".box").offset().left;
boxY = $(".box").offset( ).top;
}
//Get the coordinates when the mouse is pressed
var getDownMouse = function(m){
dMouseX = m.pageX;
dMouseY = m.pageY;
}
//Get the distance value of mouse movement
var getMoveLen = function(){
moveLenX = mMouseX - dMouseX;
moveLenY = mMouseY - dMouseY;
}
/ /When the mouse is UP, the movement is turned off, even if the mouse moves, the element will not move;
$(document).mouseup(function(){
isMove = false;
})
//Give Element's TOP binding event
$(this).
//Get the coordinates of the element and the current mouse position when pressed;
mousedown(function(e){
getbox(e) ;
getDownMouse(e)
isMove = true;
}).
//Get 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 side of the visible area browser
if(movingX<0){
$this.css({"left":0});
if(movingY<0){
$ this.css({"top":0});
}else if(movingY > bottomest){
$this.css({"top":bottomest});
}else{
$this.css({"top":boxY moveLenY});
}
}
//The top of the visible area browser
else if(movingY<0){
$this.css({"top":0});
if(movingX>rightest){
$this.css({"left":rightest});
}else{
$this.css({"left":boxX moveLenX});
}
}
//The rightmost side of the visible area browser
else if(movingX > rightest){
$this.css({"left":rightest});
if(movingY > bottomest){
$this.css({"top":bottomest});
}else{
$this.css({"top":boxY moveLenY});
}
}
//The bottom of the visible area browser
else if(movingY > bottomest){
$this.css({"top":bottomest});
if(movingX<0){
$this.css({"left":0});
}else{
$this.css({"left":boxX moveLenX});
}
}
//Other situations, that is, in the middle of the visible area
else{
$this. css({"left":boxX moveLenX,"top":boxY moveLenY});
}
movingX = boxX moveLenX;
movingY = boxY moveLenY;
}
})
}
})
}) (jQuery)

Main ideas:
　1. The element moves as far as the mouse moves, so it is necessary to obtain the mouse movement distance;
2. Press and move the mouse before dragging the layer. So we need a "switch" that turns on when the mouse is pressed. If the mouse moves here, the layer will be moved. If this is "off", the layer will not move together when the mouse moves.
3. Get the layer element, the leftmost, edge, top and bottom values ​​in the browser's visible area. And during the process of dragging the layer, compare the coordinate value of the current layer with these values, and if it exceeds these values. Then you can no longer drag in this direction, that is, set the value to the minimum or maximum.
I feel like my judgments are a bit complicated. Can anyone give me some advice on how to simplify them?

Download DEMO