今天用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实现拖动，鼠标移动过快拖动就失效的更多相关文章

  1. jQuery与vue分别实现超级简单的绿色拖动验证码功能

    jquery的绿色拖动验证功能 在网上看到了一个这样的问题:那种像拖动滑块匹配图形的验证方式是怎么实现的?. 突然想到实现一个简单绿色拖动验证码的功能,在网上搜了下,有一个用jquery实现的该功能代 ...

  2. js 鼠标左键拖动滚动

    鼠标左键拖动滚动 原作者: http://blog.csdn.net/lisatisfy/article/details/6606026 本文在源代码的基础上 增加支持水平滚动 的功能 html &l ...

  3. C# GDI绘制矩形框，鼠标左键拖动可移动矩形框，滚轮放大缩小矩形框

    最近工作需要,要做一个矩形框,并且 用鼠标左键拖动矩形框移动其位置.网上查了一些感觉他们做的挺复杂的.我自己研究一天,做了一个比较简单的,发表出来供大家参考一下.如觉得简单,可路过,谢谢.哈哈. 先大 ...

  4. ChromiumWebBrowser禁止鼠标右键和拖动

    在屏蔽之前先查看namespace CefSharp.WinForms内的代码 public class ChromiumWebBrowser : Control, IWebBrowserIntern ...

  5. 从零开始，开发一个 Web Office 套件（9）：拖动鼠标选中文字 Edge Case

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  6. vue drag 对表格的列进行拖动排序

    用drag实现拖动表格列进行列排序   以下是用到的主要方法   1.dragstart 拖动开始返回目标对象 2.dragenter 拖动过程中经过的对象 3.dragend 拖动结束返回目标对象 ...

  7. ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法

    记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题. 一.外部 ...

  8. WM_SYSCOMMAND包括很多功能，比如：拖动左边框、拖动标题栏、滚动条滚动、点击最小化、双击标题栏——Delphi 通过事件代替了大部分常用的消息，所以Delphi 简单、易用、高效

    procedure TForm1.WMSysCommand(var Message: TWMSysCommand); var str: string; begin case Message.CmdTy ...

  9. 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数

    1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

随机推荐

  1. select自己定义属性值

    select自己定义属性值 1.问题背景 下拉框能够传递值和内容,只是有时为了传值,还须要连带其它的值也一起传过来.假设用title属性.鼠标移到下拉框上方会显示出来,这样就会导致被暴露出来.所以,为 ...

  2. C语言:宽字符集操作函数

    C语言:宽字符集操作函数 (unicode编码) 字符分类: 宽字符函数普通C函数描述 iswalnum() isalnum() 测试字符是否为数字或字母 iswalpha() isalpha() 测 ...

  3. 转： 初识Agile/CMMI/Scrum

    转:http://www.cnblogs.com/maxwell/p/5093917.html 一.背景介绍 在朋友(aehyok)的建议下,初步去了解Visual Studio Online,简称V ...

  4. Kwickserver

    Kwickserver 欢迎来到Kwickserver的主页 Kwickserver是什么? Kwickserver是一个易于安装的和易于使用的服务器应用程序,从CD安装在PC兼容的硬件和坚持webi ...

  5. JavaScript数组求最大值 面试题

    1.JavaScript数组求最大值 (1)方法一:借用math.max (2)方法二:ES6 2.代码 <!DOCTYPE html> <html lang="zh&qu ...

  6. Sencha Test Futures API 探秘

    原文链接:http://blog.csdn.net/lovelyelfpop/article/details/52301249 英文原文:<Inside the Sencha Test Futu ...

  7. 【Datastage】Datastage在win10上安装报错：This Application requires one of the following versions of the .NET Framework:v1.1.4322 Do you want to install this .NET Framework version now？

    Datastage在win10上安装报错如下: 这个错误的意思是:.netFramWork的版本不符合要求,于是,我在网上下载了一个版本一致的 下载地址为:http://pan.baidu.com/s ...

  8. 去掉input框后边的叉号

    ::-ms-clear, ::-ms-reveal { display: none; }在样式里加上这句话即可

  9. 隐藏ion-nav-back-button的文字

    <ion-nav-bar class="bar-positive"> <ion-nav-back-button> </ion-nav-back-but ...

  10. 用Scratch2.0源码定制一个自己的编辑器

    用Scratch2.0源码定制一个自己的编辑器,换成自己的软件名称和图标,添加中文字体,修复汉化错误等等1.准备:下载Scratch2.0源码.安装开发工具Adobe Flash Builder4.7 ...