实现元素点击跳转长按拖拽

最新推荐文章于 2022-10-08 16:09:51 发布

木缘1668

最新推荐文章于 2022-10-08 16:09:51 发布

阅读量523

点赞数

分类专栏： JS 文章标签： JavaScript 事件

本文链接：https://blog.csdn.net/weixin_41772137/article/details/96635871

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

需求：用JS实现元素的点击跳转和长按拖拽效果

思路：用onmousedown和onmouseup事件的时间差来判断是点击还是拖拽，时间差<300毫秒认为是点击

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
</head>

<body>
  <div style="position: absolute;left:0;top:0"></div>
  <script type="text/javascript">
    var div = document.getElementsByTagName("div")[0];  
    function drag(elem) {
      var firstTime = 0;//点击开始的时间
      var lastTime = 0;//点击结束的时间
      elem.onmousedown = function (e) {
        var mX = e.pageX - parseInt(elem.style.left);//鼠标点击的位置距离元素左边边缘的距离
        var mY = e.pageY - parseInt(elem.style.top);//鼠标点击的位置距离元素顶部边缘的距离
        firstTime = new Date().getTime();//记录点击开始的时间
        document.onmousemove = function (e) {
          elem.style.left = e.pageX - mX + "px";//通过行内样式设置元素离左边的距离
          elem.style.top = e.pageY - mY + "px";//设置元素离右边的距离
        }
      }
      elem.onmouseup = function () {
        lastTime = new Date().getTime();//记录点击结束的时间
        if(lastTime - firstTime < 300){
          console.log('click');//跳转，用输出click代替
        }
        document.onmousemove = null;//解除鼠标移动事件的处理程序
      }
    }
    drag(div);
  </script>
</body>

</html>

木缘1668

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
实现元素点击跳转长按拖拽

需求：用JS实现元素的点击跳转和长按拖拽效果思路：用onmousedown和onmouseup事件的时间差来判断是点击还是拖拽，时间差<300毫秒认为是点击代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi...
复制链接

扫一扫

专栏目录