JS to achieve a compatible PC-side and mobile-side div Drag effect instance _javascript tips

Some time ago wrote a simple div drag effect, but yesterday on the project just need a small difference in demand, just used, but in the mobile end when encountered problems, drag time to use the three events: MouseDown, MouseMove, MouseUp has no effect on the mobile end. After all, the mobile end is no mouse, check the data found that in the mobile end of the corresponding is: Touchstart, Touchmove, touchend events. It is also important to note that the current mouse coordinates are obtained on the PC side: Event.clientx and Event.clienty, and coordinates are obtained at the mobile end: Event.touches[0].clientx and Event.touches[0]. ClientY.

Let's say how to achieve this effect, first look at the effect:

PC End

Moving End

To analyze a drag process first, take the PC side as an example, first is the mouse presses (MouseDown event), then moves (MouseMove event), finally releases the mouse (MouseUp event), first wants to set a variable to record the mouse to press, when the mouse presses, we make a mark , and then you need to record the current coordinates of the mouse, there is the current offset of this div, when the mouse began to move, record the current mouse coordinates, with the mouse's current coordinates minus the mouse when the coordinates, plus the mouse press when the div offset is now div distance from the Father element, When the mouse is released, change the flag to mouse has been released.

Let's take a look at the code:

var flag = false;    Whether to press the mouse tag
var cur = {       //record mouse down coordinates
  x:0,
  y:0
}
var nx,ny,dx,dy,x,y;
function down
() {
  flag = True when the mouse is pressed;       Make sure the mouse presses
  cur.x = Event.clientx;  Record the current mouse x-coordinate
  cur.y = event.clienty;  Records the y-coordinate
  dx = Div2.offsetleft of the current mouse;  Record Div's left offset at the time
  dy = div2.offsettop;   Record the top offset on div
//mouse when moving the function functions move
() {
  if (flag)} {            ///If the mouse is down then continue
    NX = event.clientx-cur.x; Record the mouse moving data in the x-axis
    NY = EVENT.CLIENTY-CUR.Y;//Record the mouse movement on the y-axis
    x = dx+nx;          The offset of the div on the x-axis plus the distance that the mouse moves in the x axis
    y = dy+ny;          Div's offset in the Y axis plus the distance the mouse moves in the y-axis
    div2.style.left = x+ "px";
    Div2.style.top = y + "px";
  }
}
Function End
() {
  flag = False When mouse is released;          Mouse Release
}

Then add the event to this Div, and then look at what to do on the mobile side, first of all, the event is different, just add the mobile end of the Touchatart, Touchmove, touchend on it, There is also a different time to get the coordinates of the mobile end is Event.touches[0].clientx and Event.touches[0].clienty, which is also very simple, as long as the addition of the judge on it, if the PC end of the use of event, Use Event.touches if it is a mobile end:

var touch;
if (event.touches) {Touch
  = event.touches[0];
} else {Touch
  = event;
}

It is also important to note that when you drag a div on the move side of the page will automatically have a sliding effect, so also need to add a touchmove to the page to block the default event function.

The following is the entire code, you can simulate the mobile side test in Chrome, click here to view:

<! DOCTYPE html>  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.