今天用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. Android访问WCF服务(使用json实现参数传递)

    经过多日努力, 终于勉强弄明白了Android访问WCF服务的方法. 服务端实现 一, 实现服务. 操作契约 [ServiceContract] public interface IService { ...

  2. C语言的运算符、位操作

    + - * / (加 减 乘 除) > >= < <= (大于 大于等于 小于 小于等于) == != (测试等于 测试不等于) && || ! (逻辑与 逻辑 ...

  3. sharepoint2010新建网站与网站集

    1.以管理员身份运行[sharepoint管理中心] 2.点击创建web应用程序 3.切换用户,我的个人用户不行,需要切换administrator用户 可以看到换成administrator账号 新 ...

  4. JAVA常见算法题(十八)

    package com.xiaowu.demo; /** * 两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人,以抽签决定比赛名单. 有人向队员打听比赛的名单:a说他不和x比 ...

  5. js获取页面传来参数的方法

    function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  6. 新人补钙系列教程之：AS 与 JS 相互通信

    比较常用的,AS 调用 JS private function callJS():void{ ExternalInterface.addCallback("callbackQQPay&quo ...

  7. Jenkins 无法下载插件的解决办法

    有时候在安装插件时可能会出现下图的问题: 这应该是由于天朝的墙导致的,所以笔者就用了手动安装的方式 到https://wiki.jenkins-ci.org/display/JENKINS/Plugi ...

  8. hibernate学习系列-----（1）开发环境搭建

    其实一两个月前就在了解hibernate方面的知识了,但一直以来,都没有好好的总结,而且一直使用的是myeclipse,感觉有些傻瓜式的操作就可以搭建起hibernate的开发环境,但这样一点都不好, ...

  9. Android学习（十四） Service组件

    一.定义 运行在后台,没有页面,不可见.优先级高于Activity,当系统内存不足时,会先释放一些Activity.注意,Service同样是运行在主线程中,不能做一些耗时操作.如果一定要做一些耗时的 ...

  10. TCP/IP 网络编程（五）

    优于 select 的 epoll (I/O 复用) select 速度慢的原因 调用select后针对全部文件描写叙述符的循环 每次调用函数时都须要向该函数传递监视对象信息 select并非把发生变 ...