vue+mousemove实现拖动，鼠标移动过快拖动就失效

Posted 2021-01-01 yalong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue+mousemove实现拖动，鼠标移动过快拖动就失效相关的知识，希望对你有一定的参考价值。

今天用vue+原生js的mousemove事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了；

搞了半天在，总算解决了，但是问题的深层原理还没搞清楚，知道的大侠可以留言分享，下面直接上代码：

只能慢速拖动的代码：

<!DOCTYPE html>
<html>
<head>
    <title>vue结合原生js实现拖动</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="ctn ctn1">
    <div class="sub sub1" v-for="(site, index) in list1">
         <div class="dragCtn fixed" @mousedown="mousedown(site, $event)" @mousemove.prevent=‘mousemove(site, $event)‘ @mouseup=‘mouseup(site, $event)‘>
          {{ site.name }}
         </div>
   </div>
</div>

<div class="ctn ctn2">
    <div class="sub sub2" v-for="(site, index) in list2">
         <div class="dragCtn">
             {{ index }} : {{ site.name }}
         </div>
   </div> 
</div>   
   
</div>

<script>
new Vue({
  el: ‘#app‘,
  data: {
    list1: [{name:‘拖动我‘, index:0}],
    list2: [{name:‘a‘, index:0}, {name:‘b‘, index:1}, {name:‘c‘, index: 2}, {name:‘d‘, index: 3}],
    vm:‘‘,
    sb_bkx: 0,
    sb_bky: 0,
    is_moving: false
  },
  methods: {
      mousedown: function (site, event) {
        var startx=event.x;
        var starty=event.y;
        this.sb_bkx=startx - event.target.offsetLeft;
        this.sb_bky=starty - event.target.offsetTop;
        this.is_moving = true;
      },
      mousemove: function (site, event) {
          var endx=event.x - this.sb_bkx;
        var endy=event.y - this.sb_bky;
        var _this = this
        if(this.is_moving){
            event.target.style.left=endx+‘px‘;
            event.target.style.top=endy+‘px‘;
        }
      },
      mouseup: function (e) {
        this.is_moving = false;
      }
  }
})
</script>

<style>
    .ctn{
        line-height: 50px;
        cursor: pointer;
        font-size: 20px;
        text-align: center;
        float: left;
    }
    .sub:hover{
        background: #e6dcdc;
        color: white;
        width: 100px;
    }
       .ctn1{
           border: 1px solid green;
           width: 100px;
       }
       .ctn2{
           border: 1px solid black;
           width: 100px;
           margin-left: 50px;
       }
       .fixed{
         width: 100px;
         height: 100px;
      position: fixed;
      background: red;
      left: 10px;
      top: 10px;
      cursor: move;
       }
</style>
</body>
</html>

可以快速拖动的代码：

<!DOCTYPE html>
<html>
<head>
    <title>vue结合原生js实现拖动</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="ctn ctn1">
<!-- draggable=true -->
    <div class="sub sub1" v-for="(site, index) in list1">
    <!-- @mousemove.prevent=‘mousemove(site, $event)‘ -->
         <div class="dragCtn fixed" @mousedown="mousedown(site, $event)" @mouseup=‘mouseup(site, $event)‘>
             {{ site.name }}
         </div>
   </div>
</div>

<div class="ctn ctn2">
    <div class="sub sub2" v-for="(site, index) in list2">
         <div class="dragCtn">
             {{ index }} : {{ site.name }}
         </div>
   </div> 
</div>   
   
</div>

<script>
new Vue({
  el: ‘#app‘,
  data: {
    list1: [{name:‘拖动我‘, index:0}],
    list2: [{name:‘a‘, index:0}, {name:‘b‘, index:1}, {name:‘c‘, index: 2}, {name:‘d‘, index: 3}],
    vm:‘‘,
    sb_bkx: 0,
    sb_bky: 0,
  },
  methods: {
      mousedown: function (site, event) {
        var event=event||window.event;
        var _target = event.target
        var startx=event.clientX;
        var starty=event.clientY;
        var sb_bkx=startx-event.target.offsetLeft;
        var sb_bky=starty-event.target.offsetTop;
        var ww=document.documentElement.clientWidth;
        var wh = window.innerHeight;

        if (event.preventDefault) {
            event.preventDefault();
        } else{
            event.returnValue=false;
        };

        document.onmousemove=function (ev) {
            var event=ev||window.event;
            var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
            if (event.clientY < 0 || event.clientX < 0 || event.clientY > wh || event.clientX > ww) {
                return false;
            };
            var endx=event.clientX-sb_bkx;
            var endy=event.clientY-sb_bky;
            _target.style.left=endx+‘px‘;
            _target.style.top=endy+‘px‘;
        }
      },

      mouseup: function (e) {
        document.onmousemove=null;
      }
  }
})
</script>

<style>
    .ctn{
        line-height: 50px;
        cursor: pointer;
        font-size: 20px;
        text-align: center;
        float: left;
    }
    .sub:hover{
        background: #e6dcdc;
        color: white;
        width: 100px;
    }
       .ctn1{
           border: 1px solid green;
           width: 100px;
       }
       .ctn2{
           border: 1px solid black;
           width: 100px;
           margin-left: 50px;
       }
       .fixed{
      width: 100px;
         height: 100px;
      position: fixed;
      background: red;
      left: 10px;
      top: 15px;
      cursor: move;
       }
</style>
</body>
</html>

vue+ 原生js拖动这块还要继续研究，待续...

以上是关于vue+mousemove实现拖动，鼠标移动过快拖动就失效的主要内容，如果未能解决你的问题，请参考以下文章

拖动元素时是不是禁用 mousemove 事件？

使用Jquery或Javascript触发mousemove事件

元素拖动

js 实现拖拽元素

在vue脚手架中元素绑定鼠标移动事件onmousemove,当鼠标按下拖拽元素,能在指定元素里左右移动,如何实现？

HTML5 Canvas元素绘制地图，如何实现显示鼠标所移动地方名称？