vue+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 = thisif(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.targetvar 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实现鼠标拖动功能(拖动过快失效问题解决方法)相关推荐

VUE单页面应用百度统计失效问题解决方法
VUE单页面应用在进行百度统计时,只能统计到主页的访问次数,而不能统计到子页面. 这是因为,如果按照以上百度统计提供的方法添加统计代码,在VUE单页面应用,如果不刷新,只会加载一次index.html ...
win10重置系统后鼠标右键桌面一直转圈圈问题解决方法
win10重置系统后发现鼠标右键桌面的时候一直在转圈圈,在网上找到方法是说在注册表中删除右键的一些选项,但总感觉有一些不妥. 自己逐个禁用右键选项,发现是NVIDIA控制面板的问题,而且也发现之前N卡 ...
vue.js+webpack 为 img src 赋值的路径问题解决方法
首先,如果使用的是img标签那么可以这样 data () {return {img: require('@/assets/SavingOverview/1.png')} }然后在template中&l ...
vue @mousemove实现拖动，鼠标移动过快拖动卡顿
需求使用vue实现滑动拼图验证码踩到的坑使用@mousemove绑定事件拖拽速度过快有严重的卡顿源代码 <template><div class="slider-v ...
element-ui+js+vue——实现图片的放大缩小拖动等功能——技能提升
elementui+js+vue--实现图片组件的封装 1. 实现图片的放大缩小 2. 实现图片的拖动功能 3. 实现图片的预览最近同事在写一个关于图片放大缩小拖动的功能,其实不止是图片,只要是在 ...
qt自定义含有拖动功能的窗口在点击窗口的下拉列表时窗口移动
提要自定义的弹出窗口,窗口可以实现按下鼠标拖动,鼠标释放停止拖动,窗口种含有子控件,下拉列表,在点击下拉列表时窗口移动. 解决方法因为点击下拉列表的时候,触发了窗口的移动事件,所以添加下拉列表的事 ...
原生JS案例（面向对象）——按住鼠标实现左右拖动列表
按住鼠标实现左右拖动列表需求基本结构效果图 HTML页面 CSS样式实现思路原生JS 最终效果实际应用需求鼠标在有色部分按下后, 可以对有颜色的部分进行左右拖拽基本结构效果图 HTML ...
Openlayers + Vue 实现自定义鼠标右键为改变视图角度事件
Openlayers + Vue 实现自定义鼠标右键为改变视图角度事件效果: 持续按下鼠标右键再拖动鼠标可以实现变换视图的角度 (openlayers的样式被我改了一下,看上去有点像ArcGIS A ...
实战 Vue 之实现拖曳排序功能
实现拖曳排序功能前言一.功能描述二.代码实现三.使用 draggable 组件小结四.完整代码前言在前面一节 <实现添加和删除常用应用功能> 讲到了删除和添加常用应用功能,今 ...

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

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

最新文章

热门文章