vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)       这篇文章主要介绍了vue+mousemove实现鼠标拖动功能，文中给大家介绍了鼠标移动过快拖动就失效问题的解决方法,需要的朋友可以参考下

今天用vue+原生js的mousemove事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了；

搞了半天在，总算解决了，但是问题的深层原理还没搞清楚，知道的大侠可以留言分享，下面直接上代码：

只能慢速拖动的代码：

 !DOCTYPE html 
 html 
 head 
 title vue结合原生js实现拖动 /title 
 script src="vue/2.4.2/vue.min.js" /script 
 /head 
 body 
 div id="app" 
 div 
 div v-for="(site, index) in list1" 
 div @mousedown="mousedown(site, $event)" @mousemove.prevent='mousemove(site, $event)' @mouseup='mouseup(site, $event)' 
 {{ site.name }}
 /div 
 /div 
 /div 
 div 
 div v-for="(site, index) in list2" 
 div 
 {{ 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="vue/2.4.2/vue.min.js" /script 
 /head 
 body 
 div id="app" 
 div 
 !-- draggable=true -- 
 div v-for="(site, index) in list1" 
 !-- @mousemove.prevent='mousemove(site, $event)' -- 
 div @mousedown="mousedown(site, $event)" @mouseup='mouseup(site, $event)' 
 {{ site.name }}
 /div 
 /div 
 /div 
 div 
 div v-for="(site, index) in list2" 
 div 
 {{ 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实现鼠标拖动功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！