今天用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. Ubuntu 16.04将ISO镜像写入U盘

    sudo fdisk -l 查看U盘的路径,如/dev/sdc为U盘的位置,注意位置!注意这个不是挂载的位置. 然后准备好ISO文件,如放在/home/jim/abc.iso 然后输入 sudo dd ...

  2. dragon-book-exercise-answers

    https://github.com/fool2fish/dragon-book-exercise-answers

  3. eclipse和maven生成web项目的war包的操作方法

    一.eclipse中,在需要打包的项目名上右击,然后把鼠标光标指向弹出框中的“run as”: 二.之后会看到在这个弹出框的右侧会出现一个悬浮窗,如下: 三.在上边的第二个悬浮窗鼠标点击“maven  ...

  4. ElasticSearch 专业术语

    1.Analysis(分析) 分析的过程就是将全文(full text)转换成 术语/分词(terms). 这取决于使用那个分析器,这些短语:“FOO BAR”, “Foo-Bar”, “foo,ba ...

  5. CentOS6.5安装ganglia3.6

    参考来源: 1.http://yhz.me/blog/Install-Ganglia-On-CentOS.html 2.http://blog.csdn.net/sdlyjzh/article/det ...

  6. Ubuntu使用日志2(在Eclipse中搭建C++交叉编译环境)

    Release用交叉编译:arm-none-linux-gnueabi-gcc. 搭建步骤: 1).在Project->Properties->C/C++ Build->Settin ...

  7. Android SQLiteDatabase中query、insert、update、delete方法参数说明

    1.SQLiteDataBase对象的query()接口: public Cursor query (String table, String[] columns, String selection, ...

  8. mother&#39;s day.py 母亲节

    今天母亲节,写了个程序.抓取一个站点的母亲节祝福短信.实现自己主动翻页, 道友们也能够甲乙改造.比方加上节日简洁,time()模块. . . 一起分享吧 # -*- coding: cp936 -*- ...

  9. hdu - 4974 - A simple water problem（贪心 + 反证）

    题意:N个队(N <= 100000),每一个队有个总分ai(ai <= 1000000),每场比赛比赛两方最多各可获得1分,问最少经过了多少场比赛. 题目链接:http://acm.hd ...

  10. 可移动磁盘显示0kb打不开怎么办

      移动硬盘.U盘打不开怎么办 为了方便共享,大多数人都购买了移动硬盘.那么如果有一天,发现移动硬盘打不开了,怎么办?下面为大家介绍移动硬盘打不开的解决方法. 未格式化故障 第一步:双击盘符出现未格式 ...