Home > Article > Web Front-end > Example of using js to implement div dragging effect (compatible with PC and mobile)

Example of using js to implement div dragging effect (compatible with PC and mobile)

怪我咯Original: 2017-03-29 15:47:071397browse

I wrote a simple p dragging effect some time ago. Unexpectedly, I needed a similar requirement for the project yesterday, so I just used it. However, I encountered a problem when using the mobile terminal. Dragging The three events used when moving: mousedown, mousemove, and mouseup have no effect on the mobile terminal. After all, there is no mouse on the mobile terminal. After checking the information, I found that the corresponding events on the mobile terminal are: touchstart, touchmove, and touchend events. Another thing to note is that the coordinates of the current mouse are obtained on the PC side: event.clientX and event.clientY, and the coordinate positions are obtained on the mobile side: 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 side

Example of using js to implement div dragging effect (compatible with PC and mobile)

Mobile side

Let’s first analyze a dragging process. Taking the PC as an example, first the mouse is pressed (mousedown event), then moved (mousemove event), and finally the mouse is released (mouseup event ), first we need to set a variable to record whether the mouse is pressed. When the mouse is pressed, we make a mark, and then we need to record the current coordinates of the mouse and the current offset of p. When the mouse starts to move, record the current coordinates of the mouse. Use the current coordinates of the mouse minus the coordinates when the mouse is pressed plus the offset of p when the mouse is pressed. This is the distance between the current p and the parent element. When the mouse When released, change the mark to indicate that the mouse has been released.

Let’s take a look at the code:

var flag = false;    //是否按下鼠标的标记
var cur = {       //记录鼠标按下时的坐标
  x:0,
  y:0
}
var nx,ny,dx,dy,x,y ;
//鼠标按下时的函数
function down(){
  flag = true;       //确认鼠标按下
  cur.x = event.clientX;  //记录当前鼠标的x坐标
  cur.y = event.clientY;  //记录当前鼠标的y坐标
  dx = p2.offsetLeft;  //记录p当时的左偏移量
  dy = p2.offsetTop;   //记录p的上偏移量
}
//鼠标移动时的函数
function move(){
  if(flag){            //如果是鼠标按下则继续执行
    nx = event.clientX - cur.x; //记录鼠标在x轴移动的数据
    ny = event.clientY - cur.y; //记录鼠标在y轴移动的数据
    x = dx+nx;          //p在x轴的偏移量加上鼠标在x轴移动的距离
    y = dy+ny;          //p在y轴的偏移量加上鼠标在y轴移动的距离
    p2.style.left = x+"px";
    p2.style.top = y +"px";
  }
}
//鼠标释放时候的函数
function end(){
  flag = false;          //鼠标释放
}

Then add the event to this p. Let’s look at another one on the mobile side. What needs to be done, first of all, the events are different. You only need to add touchatart, touchmove, and touchend on the mobile side. There is also a different time when the mobile side obtains coordinates: event.touches[0].clientX and event.touches[0 ].clientY, this is also very simple, just add judgment. If it is a PC, use event. If it is a mobile terminal, use event.touches:

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

Another thing to note is that when dragging p on the mobile terminal, the mobile page will automatically produce a sliding effect, so you also need to add a function to the page in touchmove to prevent the default event.

The following is the entire code, which can be simulated for mobile testing under Chrome. Click here to view:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>适配移动端的拖动效果</title>
  <style>
    #p1{
      height: 1000px;
    }
    #p2{
      position: absolute;
      top:0;
      left:0;
      width: 100px;
      height: 100px;
      background: #bbbbbb;
    }
  </style>
</head>
<body>
<p id="p1">
  <p id="p2"></p>
</p>
<script>
  var flag = false;
  var cur = {
    x:0,
    y:0
  }
  var nx,ny,dx,dy,x,y ;
  function down(){
    flag = true;
    var touch ;
    if(event.touches){
      touch = event.touches[0];
    }else {
      touch = event;
    }
    cur.x = touch.clientX;
    cur.y = touch.clientY;
    dx = p2.offsetLeft;
    dy = p2.offsetTop;
  }
  function move(){
    if(flag){
      var touch ;
      if(event.touches){
        touch = event.touches[0];
      }else {
        touch = event;
      }
      nx = touch.clientX - cur.x;
      ny = touch.clientY - cur.y;
      x = dx+nx;
      y = dy+ny;
      p2.style.left = x+"px";
      p2.style.top = y +"px";
      //阻止页面的滑动默认事件
      document.addEventListener("touchmove",function(){
        event.preventDefault();
      },false);
    }
  }
  //鼠标释放时候的函数
  function end(){
    flag = false;
  }
  var p2 = document.getElementById("p2");
  p2.addEventListener("mousedown",function(){
    down();
  },false);
  p2.addEventListener("touchstart",function(){
    down();
  },false)
  p2.addEventListener("mousemove",function(){
    move();
  },false);
  p2.addEventListener("touchmove",function(){
    move();
  },false)
  document.body.addEventListener("mouseup",function(){
    end();
  },false);
  p2.addEventListener("touchend",function(){
    end();
  },false);
</script>
</body>
</html>

The above is the detailed content of Example of using js to implement div dragging effect (compatible with PC and mobile). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use JS to determine whether it is accessed by mobile phone or padNext article：How to use JS to determine whether it is accessed by mobile phone or pad

See more

Example of using js to implement div dragging effect (compatible with PC and mobile)

Related articles