vuejs 移动端 实现div拖拽移动

vue 移动端 实现div拖拽移动

相关知识点
touchstart 当在屏幕上按下手指时触发

touchmove 当在屏幕上移动手指时触发

touchend 当在屏幕上抬起手指时触发
mousedown mousemove mouseup对应的是PC端的事件

touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

html
<template>
    <div id="webId">
        <div>你的web页面</div>
        <!-- 如果碰到滑动问题,1.1 请检查这里是否属于同一点。 -->
        <!-- 悬浮的HTML -->
        <div v-if="!isShow" class="xuanfu" id="moveDiv"
          @mousedown="down" @touchstart="down"
             //..prevent 防止滑动时,页面也跟着滑动
          @mousemove="move" @touchmove.prevent="move"	
          @mouseup="end" @touchend="end"
        >
          <div class="yuanqiu">
            {{pageInfo.totalPage}}
          </div>
    </div>
  </div>

js
<script>
data() {
  return {
    flags: false,
    position: { x: 0, y: 0 },
    nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
  }
}

methods: {
  // 实现移动端拖拽
  down(){
    this.flags = true;
    var touch;
    if(event.touches){
        touch = event.touches[0];
    }else {
        touch = event;
    }
    this.position.x = touch.clientX;
    this.position.y = touch.clientY;
    this.dx = moveDiv.offsetLeft;
    this.dy = moveDiv.offsetTop;
  },
  move(){
    if(this.flags){
      var touch ;
      if(event.touches){
          touch = event.touches[0];
      }else {
          touch = event;
      }
      this.nx = touch.clientX - this.position.x;
      this.ny = touch.clientY - this.position.y;
      this.xPum = this.dx+this.nx;
      this.yPum = this.dy+this.ny;
      moveDiv.style.left = this.xPum+"px";
      moveDiv.style.top = this.yPum +"px";
      //阻止页面的滑动默认事件;如果碰到滑动问题,1.2 请注意是否获取到 touchmove
      document.addEventListener("touchmove",function(){
          event.preventDefault();
      },false);
    }
  },
//鼠标释放时候的函数
  end(){
    this.flags = false;
  },
}
</script>

css
<style>
  .xuanfu {
    height: 4.5rem;
    width: 4.5rem;
    /* 如果碰到滑动问题,1.3 请检查 z-index。z-index需比web大一级*/
    z-index: 999;
    position: fixed;
    top: 4.2rem;
    right: 3.2rem;
    border-radius: 0.8rem;
    background-color: rgba(0, 0, 0, 0.55);
  }
  .yuanqiu {
    height: 2.7rem;
    width: 2.7rem;
    border: 0.3rem solid rgba(140, 136, 136, 0.5);
    margin: 0.65rem auto;
    color: #000000;
    font-size: 1.6rem;
    line-height: 2.7rem;
    text-align: center;
    border-radius: 100%;
    background-color: #ffffff;
  }
</style>

demo

移动端实现 div 的可拖拽功能通常需要 JavaScript 和一些 UI 框架的支持,例如 React Native、Vue 或者原生的 HTML5。以下是基本步骤: 1. **HTML 结构**:首先创建一个可拖动的 div 元素,并添加必要的样式和事件监听器。 ```html <div id="draggable" style="position: absolute; width: 100px; height: 100px; background-color: blue;" draggable="true"></div> ``` 2. **JavaScript 动作**:使用 `ondragstart` 事件处理开始拖动,`ondragover` 控制是否允许放置,`ondrop` 事件处理放下元素并更新位置。 ```javascript document.getElementById('draggable').addEventListener('dragstart', function(event) { event.dataTransfer.setData('text/plain', 'Dragged Div'); }); document.getElementById('draggable').addEventListener('dragover', function(event) { event.preventDefault(); // 阻止默认阻止行为 }); document.getElementById('droppableArea').addEventListener('drop', function(event) { event.preventDefault(); let draggableDiv = event.dataTransfer.getData('text/plain'); // 获取拖动的数据 // 更新拖放区域的位置 this.appendChild(document.getElementById(draggableDiv)); }); ``` 3. **可放置区域 (Drop Target)**:为了让用户能将 div 放置到特定区域内,也需要在那个区域设置相应的监听器,如上面的 `ondrop` 属性。 4. **CSS 调整**:确保拖放区域和其他元素的布局可以适应拖动操作,可能还需要调整 z-index 来保证层叠效果。 5. **性能优化**:考虑到移动设备资源有限,可以考虑优化动画性能,比如使用 `requestAnimationFrame` 替换 `setInterval`。 **相关问题:** 1. 如何在纯 CSS 中实现拖拽效果? 2. 使用 React Native 实现拖拽功能需要注意哪些问题? 3. 怎样防止 div 在滚动页面时意外脱离可视区而无法拖动?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值