Mouse drag and drop effect principle and complete code realization

Mask floating layer effect is very simple, but if you add the mouse drag effect will appear higher grade, today to share the mouse drag effect.

Mouse drag-and-drop effect of the main event has three, is also three stages, respectively, Mousedown,mousemove,mouseup. Let's first analyze the focus of each process.

1> MouseDown is the mouse down stage, this stage we want to determine the position of the mouse relative to the floating layer, and the floating layer is set to a draggable state.

2> MouseMove is the mouse movement phase, where you need to know the new position of the mouse after moving, and calculate the position of the floating layer after the move, and set the movable range, to prevent the occurrence of scroll bar.

3> MouseUp Mouse Release stage, this stage, simply drag the state can be set to not drag.

The following is the core code:

function Mousedraggle (ID) {

    $_id (ID). AddEventListener ("MouseDown", function (e) {var el=e| |
   window.event;//to be compatible with IE//To calculate the position of the mouse relative to the floating layer StartX = el.pagex-$_id (id). offsetleft;
   Starty = el.pagey-$_id (id). offsetTop;
Isdraggle = true;
}); Document.onmousemove=function (e) {//Current position of floating layer element var el = e| |
   window.event;//in order to be compatible with Ie,ie, the event object is contained in the Window object var mousex = El.pagex-startx;
   var mousey = El.pagey-starty;
   Gets the size of the page var bodyw = document.documentElement.clientWidth;
    var bodyh = document.documentElement.clientHeight;
    Gets the size of the floating layer var partwidth = $_id (id). offsetwidth;
    
    var partheight = $_id (id). offsetheight; var maxWidth = bodyw-partwidth;//floating layer movable maximum width var maxheight = bodyh-partheight;//floating layer movable maximum height//limit in a draggable state
        Drag the range, or the ugly scroll bar will appear if (Isdraggle = = True) {var MoveX = math.min (Maxwidth,math.max (0,mousex));
         var Movey = math.min (Maxheight,math.max (0,mousey));
         $_id (id). Style.left = MoveX + ' px ';
 $_id (id). Style.top = Movey + ' px ';  }
 
}; Document.onmouseup = function () {isdraggle = false;}}

This is the code for the above three states, and it is important to note that I have commented on it in the code.

Ps:

1. When the event is listening, the first argument about the event is not on, and the window,document needs to be added on.

2.pageX and Pagey If there is a scroll bar, the position of the mouse also includes scrolling width and height, while ClientX and clienty do not include the length of the scroll, so when there is no scroll bar, Clientx=pagex,clieny=pagey.