Js implements an example that is compatible with the div drag effect on the PC side and mobile side, jsdiv

Js implements an example that is compatible with the div drag effect on the PC side and mobile side, jsdiv

Some time ago I wrote a simple div drag effect. unexpectedly, the project just needed a similar requirement yesterday and it was easy to use. However, I encountered a problem at the mobile end, three events used for dragging: mousedown, mousemove, and mouseup do not play any role on the Mobile End. After all, there is no mouse on the Mobile End. After checking the data, we found that the Mobile End corresponds to the touchstart, touchmove, and touchend events respectively. Note that the coordinates of the current mouse on the PC side are: event. clientX and event. clientY. The coordinates obtained from the mobile terminal are: event. touches [0]. clientX and event. touches [0]. clientY.

Let's talk about how to achieve this effect. Let's take a look at the effect first:

PC end

Mobile Terminal

First, let's analyze a drag process. On the PC side, for example, the first step is to press the mouse (mousedown event), move the mouse (mousemove event), and finally release the mouse (mouseup event ), first, you need to set a variable to record whether to press the mouse. When you press the mouse, we make a mark, and then we need to record the current coordinates of the mouse and the current offset of the div, when the Mouse starts to move, record the current coordinates of the mouse, when you press the cursor, the offset of the div is the distance between the div and the parent element. When the cursor is released, the cursor is released.

Let's take a look at the code below:

Var flag = false; // indicates whether to press the mouse to mark var cur = {// record the coordinates x: 0, y: 0} var nx, ny, dx, dy, x, y; // function down () {flag = true when the mouse is pressed; // confirm that the mouse is pressed by cur. x = event. clientX; // record the x coordinate cur of the current mouse. y = event. clientY; // record the y coordinate dx = div2.offsetLeft of the current mouse; // record the current left offset dy = div2.offsetTop of the div; // record the upper offset of the div} // function move () {if (flag) {// execute nx = event if the cursor is pressed. clientX-cur. x; // records the data that the mouse moves on the x axis. ny = event. clientY-cur. y; // record the data that the mouse moves on the y axis x = dx + nx; // the offset of the div on the x axis plus the distance from the mouse moves on the x axis y = dy + ny; // div2.style. left = x + "px"; div2.style. top = y + "px" ;}/// function end () {flag = false when the mouse is released; // release the mouse}

Then, add the event to this div. Next, let's take a look at what needs to be done on the Mobile End. First, the event is different, you only need to add touchatart, touchmove, and touchend to the mobile terminal. In addition, the coordinates obtained by the mobile terminal are event. touches [0]. clientX and event. touches [0]. clientY, this is also very simple, as long as you add judgment, if it is a PC side, use event, if it is a mobile terminal, use event. touches:

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

Note that when dragging the div on the mobile terminal, the page on the mobile terminal will automatically slide, so you also need to add a function to the page to block the default event in touchmove.

The entire code is shown below. You can simulate mobile testing in Chrome. Click here to view the Code:

<! DOCTYPE html> 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.