HTML5，DIV拖拽移動，左右吸邊，適用移動端、PC端

阿新 • • 發佈：2021-06-30

HTML移動端完美支援蘋果、安卓，CV大法走起！！！！

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta charset="utf-8" />
    <title>移動端DIV拖拽(左右吸邊)</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <!-- <link rel="stylesheet" type="text/css" href="css/base_h5_rem.css"> -->
    <style>
      html{width:  
100%;height: 100%;padding: 0; margin: 0;}
      body{width: 100%;height: 100%;padding: 0; margin: 0;}
      #body_div{width: 100%;height: 100%;display: flex;flex-direction: column;position: relative;background-color: #F2F2F2;}
    </style>
  </head>
  <body>
    <div id="body_div">
      <header style="text-align: center;padding: 15px 0;background-color: #FFFFFF;">移動端/PC端DIV拖拽(左右吸邊)(js+vue.js)</header>
      <div style="flex: 1 1 auto;position: relative;">
        
        <!-- 注意position: absolute;和父級元素position: relative;屬性 -->
        <div @touchstart="wtouchstart" @touchmove="wtouchmove" @touchend="wtouchend" @mousedown="wonmousedown" @mousemove="wonmousemove" @mouseup="wonmouseup" style="width: 50px;height: 50px;background-color: red;position: absolute;left: 0px;top: 15%; color: #FFFFFF; font-size: 12px;">我不超出灰色DIV</div>
        
      </div>
      
      <footer style="text-align: center;padding: 15px 0;background-color: #FFFFFF;">底部</footer>
      
      <!-- 注意position: absolute;和父級元素position: relative;屬性 -->
      <div @touchstart="wtouchstart" @touchmove="wtouchmove" @touchend="wtouchend" @mousedown="wonmousedown" @mousemove="wonmousemove" @mouseup="wonmouseup" style="width: 70px;height: 70px;background-color: red;position: absolute;right: 0;top: 60%;color: #FFFFFF;">我不超出整個頁面</div>
      
    </div>
  </body>
</html>
<script>
  // 
 注意元素的定位，相對或者固定定位，必須脫離文件流
  // 注意元素的定位，相對或者固定定位，必須脫離文件流
  // 注意元素的定位，相對或者固定定位，必須脫離文件流
  // 我是相對定位，相對於父元素
    new Vue({
        el: "#body_div",
        data: {
      mouseStartX: 0,
      mouseStartY: 0,
      currX: 0,
      currY: 0,
      pcDownFlag: false
        },
        created() {
      
        },
        methods: {
       
// 移動端事件 touch start
      wtouchstart(e){
        // 相對於父元素的右上角座標為 x=0,y=0
        this.mouseStartX = e.changedTouches[0].pageX //獲取滑鼠點選的X座標
        this.mouseStartY = e.changedTouches[0].pageY //獲取滑鼠點選的Y座標
        this.currX = e.changedTouches[0].target.offsetLeft //相對於當前視窗X軸的偏移量
        this.currY = e.changedTouches[0].target.offsetTop //相對於當前視窗Y軸的偏移量
      },
      // 移動端事件 touch move
      wtouchmove(e){
        let currDom = e.changedTouches[0].target
        e.preventDefault();
        moveX=e.changedTouches[0].pageX;//移動過程中X軸的座標
        moveY=e.changedTouches[0].pageY;//移動過程中Y軸的座標
        let leftX = this.mouseStartX-this.currX  //滑鼠所能移動的最左端是當前滑鼠距div左邊距的位置
        let rightX = currDom.parentNode.clientWidth-currDom.clientWidth+leftX  //滑鼠所能移動的最右端是當前視窗距離減去滑鼠距div最右端位置
        let topY = this.mouseStartY-this.currY  //滑鼠所能移動最上端是當前滑鼠距div上邊距的位置
        let bottomY = currDom.parentNode.clientHeight-currDom.clientHeight+topY //滑鼠所能移動最下端是當前視窗距離減去滑鼠距div最下端位置
        if(moveX<leftX){moveX=leftX;}
        if(moveX>rightX){moveX=rightX;}
        if(moveY<topY){moveY=topY;}
        if(moveY>bottomY){moveY=bottomY;}
        currDom.style.left = (moveX+ this.currX-this.mouseStartX) + 'px'
        currDom.style.top = (moveY+this.currY-this.mouseStartY) + 'px'
      },
      // 移動端事件 touch end
      wtouchend(e){
        const currDom = e.changedTouches[0].target
        e.preventDefault();
        moveX=e.changedTouches[0].pageX;//移動過程中X軸的座標
        moveY=e.changedTouches[0].pageY;//移動過程中Y軸的座標
        if(this.currX == currDom.offsetLeft && this.currY == currDom.offsetTop){
          // div座標未移動，認為它是點選事件
          console.log('點選事件');
        }else{
          let left = moveX+ this.currX-this.mouseStartX
          let subX = currDom.parentNode.clientWidth - currDom.clientWidth
          if(left >= subX/2){
            currDom.style.left = subX + 'px'
          }else{
            currDom.style.left = 0 + 'px'
          }
        }
      },
      // 電腦端原理一樣，看下邊方法名變了，刪除了changedTouches[0]這個，其它就只有CV了
      // 電腦端 onmouse down
      wonmousedown (e){
        // 相對於父元素的右上角座標為 x=0,y=0
        this.mouseStartX = e.pageX //獲取滑鼠點選的X座標
        this.mouseStartY = e.pageY //獲取滑鼠點選的Y座標
        this.currX = e.target.offsetLeft //相對於當前視窗X軸的偏移量
        this.currY = e.target.offsetTop //相對於當前視窗Y軸的偏移量
        this.pcDownFlag = true
      },
      // 電腦端 onmouse move
      wonmousemove(e){
        if(!this.pcDownFlag){ //這是移動端touch和mouse方法唯一的區別了，試著可以註釋掉，就知道原因了
          return
        }
        let currDom = e.target
        e.preventDefault();
        moveX=e.pageX;//移動過程中X軸的座標
        moveY=e.pageY;//移動過程中Y軸的座標
        let leftX = this.mouseStartX-this.currX  //滑鼠所能移動的最左端是當前滑鼠距div左邊距的位置
        let rightX = currDom.parentNode.clientWidth-currDom.clientWidth+leftX  //滑鼠所能移動的最右端是當前視窗距離減去滑鼠距div最右端位置
        let topY = this.mouseStartY-this.currY  //滑鼠所能移動最上端是當前滑鼠距div上邊距的位置
        let bottomY = currDom.parentNode.clientHeight-currDom.clientHeight+topY //滑鼠所能移動最下端是當前視窗距離減去滑鼠距div最下端位置
        if(moveX<leftX){moveX=leftX;}
        if(moveX>rightX){moveX=rightX;}
        if(moveY<topY){moveY=topY;}
        if(moveY>bottomY){moveY=bottomY;}
        currDom.style.left = (moveX+ this.currX-this.mouseStartX) + 'px'
        currDom.style.top = (moveY+this.currY-this.mouseStartY) + 'px'
      },
      // 電腦端 onmouse up
      wonmouseup(e){
        this.pcDownFlag = false
        const currDom = e.target
        e.preventDefault();
        moveX=e.pageX;//移動過程中X軸的座標
        moveY=e.pageY;//移動過程中Y軸的座標
        if(this.currX == currDom.offsetLeft && this.currY == currDom.offsetTop){
          // div座標未移動，認為它是點選事件
          console.log('點選事件');
        }else{
          let left = moveX+ this.currX-this.mouseStartX
          let subX = currDom.parentNode.clientWidth - currDom.clientWidth
          if(left >= subX/2){
            currDom.style.left = subX + 'px'
          }else{
            currDom.style.left = 0 + 'px'
          }
        }
      }
        }
    })
</script>