vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)


Posted in Javascript onAugust 24, 2018

今天用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 自定义指令-拖拽

主要思想: 获取拖拽的dom元素,在oDiv.onmousedown事件内获取鼠标相对dom元素本身的位置:

var disX=ev.clientX-oDiv.offsetLeft;
 var disY=ev.clientY-oDiv.offsetTop;

再通过document.onmousemove事件计算dom元素左上角相对 视口的距离:

var l=ev.clientX-disX;
var t=ev.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';

完整代码:

<script>
  /* vue-自定义指令-拖拽 */
  Vue.directive('drag',function(){
   var oDiv=this.el;
   oDiv.onmousedown=function(ev){
    var disX=ev.clientX-oDiv.offsetLeft;
    var disY=ev.clientY-oDiv.offsetTop;
    document.onmousemove=function(ev){
     var l=ev.clientX-disX;
     var t=ev.clientY-disY;
     oDiv.style.left=l+'px';
     oDiv.style.top=t+'px';
    };
    document.onmouseup=function(){
     document.onmousemove=null;
     document.onmouseup=null;
    };
   };
  });
  window.onload=function(){
   var vm=new Vue({
    el:'#box',
    data:{
     msg:'welcome'
    }
   });
  };
 </script>
</head>
<body>
 <div id="box">
  <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
  <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
 </div>
</body>

总结

以上所述是小编给大家介绍的vue+mousemove实现鼠标拖动功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
javascript String 的扩展方法集合
Jun 01 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 #Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 #Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 #Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 #Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 #Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 #Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 #Javascript
You might like
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
PHP导入导出Excel代码
2015/07/07 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
node跨域请求方法小结
2017/08/25 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
python实现发送邮件及附件功能
2021/03/02 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
pybind11在Windows下的使用教程
2019/07/04 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
写自荐信要注意什么
2013/12/26 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android