今天用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. 关联模型中如果condition条件

    在练习中,有一个user表和地址表,一对多的关系. 我的想法是,通过这个关联模型找出这个用户下面默认值字段为1的地址 控制器中 public function index(){ $User = D(' ...

  2. Java：网络编程值TCP的使用

    演示TCP传输   1.Tcp分客户端和服务端 2.客服端对应的对象是scoket    服务端对应的对象是serverscoket   客户端: 通过查阅scoket对象,发现在建立对象时,就可以连 ...

  3. mysql行转列，单列转多行

    行转列 使用CASE语句: SELECT SUM(CASE USER_NAME='A' THEN KILLS END) AS 'A', SUM(CASE USERNAME='B' THEN KILL ...

  4. ElasticSearch的内存设置

    编辑ElasticSearch中bin目录下 vi elasticsearch中 加上   export ES_HEAP_SIZE=24g 修改配置文件 config/elasticsearch.ya ...

  5. 对中级 Linux 用户非常有用的 20 个命令

    FROM:http://www.oschina.net/translate/20-advanced-commands-for-middle-level-linux-users 21. 命令: Find ...

  6. VirtualBox下Linux(centos)扩展磁盘空间

    最近在Linux里做文件合并,做分词,磁盘空间不够,把扩展磁盘空间方法记录一下. 1.在VirtualBox安装路径下(例如C:\Program Files\Oracle\VirtualBox> ...

  7. Java虚拟机内存分配和回收策略

    1 对象优先分配在Eden区 对象优先在Eden进行分配,大多数情况下,对象在新生代Eden区进行分配.当Eden区没有足够的空间进行分配时,虚拟机会发起一次Minor GC. 新生代GC(Ninor ...

  8. Neon Intrinsics各函数介绍

    #ifndef __ARM_NEON__ #error You must enable NEON instructions (e.g. -mfloat-abi=softfp -mfpu=neon) t ...

  9. 在windows上一键编译各种版本的protobuf(2017-12-05修改)

    所需工具 : cmake  for  windows 和  git for windows 原理:protobuf 是google的一个开源项目,其源代码在github上可以下载到,并且源码都采用cm ...

  10. Hdu 2243 考研路茫茫——单词情结 （AC自己主动机+矩阵）

    哎哟喂.中文题. . .不说题意了. 首先做过POJ 2778能够知道AC自己主动机是能够求出长度为L的串中不含病毒串的数量的. POJ 2778的大概思路就是先用全部给的病毒串建一个AC自己主动机. ...