美文网首页JavaScript前端
【前端案例】 22 - 案例:移动端拖动元素

【前端案例】 22 - 案例:移动端拖动元素

作者: itlu | 来源:发表于2020-12-17 11:25 被阅读0次

案例演示

移动端拖拽元素

功能分析

  1. touchstarttouchmovetouchend可以实现拖动元素;

  2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageXpageY

  3. 移动端拖动的原理: 手指移动中,计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离;

  4. 手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置。

拖动元素三步曲:

  1. 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置;

  2. 移动手指touchmove: 计算手指的滑动距离,并且移动盒子;

  3. 离开手指 touchend

代码实现

div {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 200px;
      background-color: pink;
    }
<div></div>
/**
   * 1. 触摸元素 touchstart 获取手指初始坐标,同时获得盒子原来的位置
   *
   * 2. 移动手指 touchmove 计算手指的滑动距离并且移动盒子
   *
   * 3. 手指离开 touchend
   *
   * 4. 手指移动也会触发滚动屏幕的事件这里需要阻止其默认的事件 e.preventDefault()
   */
  let div = document.querySelector('div');
  let startX = 0;
  let startY = 0;
  let x = 0;
  let y = 0;

  /**
   * 当鼠标触摸屏幕的时候获取到当前鼠标所在初始的位置 和 元素 div 的初始位置
   */
  div.addEventListener('touchstart', (e) => {
    startX = e.targetTouches[0].pageX;
    startY = e.targetTouches[0].pageY;
    x = div.offsetLeft;
    y = div.offsetTop;
  })

  /**
   * 当鼠标移动的时候 需要获取到当前鼠标的位置 计算出鼠标初始位置到当前位置移动的坐标
   */
  div.addEventListener('touchmove', (e) => {
    let moveX = e.targetTouches[0].pageX - startX;
    let moveY = e.targetTouches[0].pageY - startY;
    // 移动盒子
    div.style.left = x + moveX + 'px';
    div.style.top = y + moveY + 'px';
    // 禁用默认的屏幕滚动事件
    e.preventDefault();
  })

相关文章

  • 【前端案例】 22 - 案例:移动端拖动元素

    案例演示 功能分析 touchstart、touchmove、touchend可以实现拖动元素; 但是拖动元素需要...

  • canvas简单案例合集

    案例链接 收集简单的canvas 2d案例,争取收集999个,持续更新,用手机端查看或pc模拟移动端

  • jQuery

    参考资料 jquery官方教程文档 W3cschool 官方API文档 案例demo 案例demo效果(移动端) ...

  • JS-WEB-API-Day5

    一次性定时器 案例:协议按钮禁用: 案例:div渐变: div变宽: 案例:移动元素 封装动画: 简单的轮播图 h...

  • 移动端布局案例

  • C4D三维动画

    基本操作 选择:可以选择多个元素,但是不能拖动移动:可以拖动某个元素移动其位置层级:元素之间也可以存着上下层关系,...

  • Javascript知识整理——拖放

    拖放事件 拖动某元素时,将依次触发下列事件(被拖动元素): dragstart按下鼠标并开始移动鼠标时在被拖动元素...

  • cropper.js 实现裁剪图片并上传(移动端)

    上一篇文章已经编写了PC端的裁剪图片案例,这次是涉及移动端的头像裁剪更换,类似于微信更换头像功能。。。 案例下载 ...

  • 01-移动web开发

    一、移动web基础 京东双十一销售额 主流移动站点 移动端浏览器 案例《京东商城》 PC端的开发技术可以实现吗?不...

  • 阻止移动端 touchmove 与 scroll 事件冲突

    在移动端开发过程中,如果要实现一个元素或按钮的拖动定位,会出现很多坑。例如:元素上下移动过程中,会触发 body ...

网友评论

    本文标题:【前端案例】 22 - 案例:移动端拖动元素

    本文链接:https://www.haomeiwen.com/subject/eqtzgktx.html