今天用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 Traffic] 让android应用在传输网络数据的时候更省电

    到今年6月,我国的手机网民已经达到了3.88亿,超过了电脑终端.相信有智能机的同学都用过手机上网冲浪.但是手机的电量很快被用光了恐怕是每个人都不能忍受的一件事情.而打开数据连接进行网络数据的传输是很耗 ...

  2. docker 常用 命令

    http://os.51cto.com/art/201409/451117.htm 2.1 在测试机启动容器,安装ssh docker run -i -t ubuntu /bin/bash #此方式运 ...

  3. Shell--命令别名与历史命令

    1.命令别名设置:alias,unalias alias:列出目前系统所有的命令别名 设置命令别名:alias 别名=’命令 参数’ 例如:alias lm=’ls -l | more’ unalia ...

  4. Python 面向对象一（转载）

    一.前言 1.面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 2.类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 3.对象,根据模板创建 ...

  5. 静态代码检查工具-PMD刚開始学习的人入门篇

    前言: PMD是一款静态代码分析工具.它能够自己主动检測各种潜在缺陷以及不安全或未优化的代码. PMD很多其它地是集中在预先检測缺陷上.它提供了高度可配置的丰富规则集,用户能够方便配置对待特定项目使用 ...

  6. 倍福TwinCAT(贝福Beckhoff)基础教程4.2 TwinCAT如何读写CSV文件

    本程序只是在官方范例程序上稍作修改,在官方原有的范例中,演示了多种模式的读写(可以认为CSV文件是比TXT文件需要更多数据量的时候使用,比如记录一个小型的数据库集合)   但是写的比较混乱,甚至没有H ...

  7. Splay树（多操作）——POJ 3580 SuperMemo

    相应POJ题目:点击打开链接 SuperMemo Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 11309   Accept ...

  8. 单例模式 - GCD 、兼容ARC和MRC

    单例模式 - GCD .兼容ARC和MRC 单例模式的作用: 1,能够保证在程序执行过程.一个类仅仅有一个实例,并且该实例易于供外界訪问 2,从而方便地控制了实例个数,并节约系统资源 单例模式的使用场 ...

  9. java模拟异步消息的发送与回调

      http://kt8668.iteye.com/blog/205739 本文的目的并不是介绍使用的什么技术,而是重点阐述其实现原理. 一. 异步和同步 讲通俗点,异步就是不需要等当前执行的动作完成 ...

  10. CentOS 安装rz和sz

    在虚机装了CentOS6.4版本,结果ssh上去后发现rz命令不能用.那只有自力更生了,其实很简单,如下: yum install lrzsz 如果本地没有包,需要编译安装了: cd /tmp wge ...