这篇文章主要介绍了某视频剪辑软件鼠标移动实现鼠标拖动功能，文中给大家介绍了鼠标移动过快拖动就失效问题的解决方法，需要的朋友可以参考下
今天用某视频剪辑软件原生射流研究…的鼠标移动事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了；
搞了半天在，总算解决了，但是问题的深层原理还没搞清楚，知道的大侠可以留言分享，下面直接上代码：
只能慢速拖动的代码：
！文档类型超文本标记语言
超文本标记语言
头
titlevue结合原生射流研究…实现拖动/标题
脚本src=' https://cdn。bootcss。com/vue/2。4 .2/vue。量滴js '/脚本
/头
身体
div id='应用程序'
ctn ctn1 '
列表一中的div class='sub sub1' v-for='(站点，索引)
div class=' drag ctn fixed ' @ mousedown=' mousedown(site，$event)' @mouseup='mouseup(site，$event)'
{{ site.name }}
/div
/div
/div
ctn ctn2 '
列表2中的div class='sub sub2' v-for='(站点，索引)
div class='dragCtn '
{{ index }} : {{ site.name }}
/div
/div
/div
/div
脚本
新Vue({
埃尔：' #app '，
数据：{
列表1:[{名称：'拖动我，索引：0}],
list2: [{name:'a '，index:0}，{name:'b '，index:1}，{name:'c '，index: 2}，{name:'d '，index: 3}]，
虚拟机：'',
sb_bkx: 0，
sb_bky: 0，
is_moving: false
},
方法：{
鼠标按下：函数（站点，事件){
var startx=event.x
var starty=event.y
这个。sb _ bkx=startx-event。目标。向左偏移；
这个。sb _ bky=开始事件。目标。offsettop
this.is _ moving=true
},
鼠标移动：函数（站点，事件){
var endx=事件。这个。sb _ bkx
var endy=事件。这个。sb _ bky
var _this=this
如果(this.is_moving){
事件。目标。风格。left=endx ' px
事件。目标。风格。top=endy ' px
}
},
鼠标抬起：函数(e) {
this.is _ moving=false
}
}
})
/脚本
风格。ctn{
行高：50px
光标：指针；
字体大小：20px
文本对齐：居中；
浮动：左；
}。子：悬停{
背景：# e6dcdc
颜色：白色；
宽度：100像素
}。ctn1{
边框：1px纯绿；
宽度：100像素
}。ctn2{
边框：1px纯黑；
宽度：100像素
左边距：50px
}。固定{
宽度：100像素
高度：100像素
位置：固定；
背景：红色；
左：10px
top:10px；
光标：移动；
}
/风格
/body
/html
可以快速拖动的代码：
！文档类型超文本标记语言
超文本标记语言
头
titlevue结合原生射流研究…实现拖动/标题
脚本src=' https://cdn。bootcss。com/vue/2。4 .2/vue。量滴js '/脚本
/头
身体
div id='应用程序'
ctn ctn1 '
！- draggable=true -
列表一中的div class='sub sub1' v-for='(站点，索引)
！-@ mousemove。prevent=' mousemove(site，$event)' -
div class=' drag ctn fixed ' @ mousedown=' mousedown(site，$event)' @mouseup='mouseup(site，$event)'
{{ site.name }}
/div
/div
/div
ctn ctn2 '
列表2中的div class='sub sub2' v-for='(站点，索引)
div class='dragCtn '
{{ index }} : {{ site.name }}
/div
/div
/div
/div
脚本
新Vue({
埃尔：' #app '，
数据：{
列表1:[{名称：'拖动我，索引：0}],
list2: [{name:'a '，index:0}，{name:'b '，index:1}，{name:'c '，index: 2}，{name:'d '，index: 3}]，
虚拟机：'',
sb_bkx: 0，
sb_bky: 0，
},
方法：{
鼠标按下：函数（站点，事件){
var event=event | | window.event
var _target=事件。目标
var startx=event.clientX
var starty=event.clientY
var sb _ bkx=startx-event。目标。向左偏移；
var sb _ bky=starty-event。目标。offsettop
var ww=文档。documentelement。客户端宽度；
var wh=window.innerHeight
if (event.preventDefault) {
事件。防止默认()；
}否则{
event.returnValue=false
};
文档。onmousemove=function(ev){
var event=ev | | window.event
var scroll top=文档。文档元素。向上滚动| |文档。身体。滚动顶部；
如果(事件。客户端0 | |事件。clientx 0 | |事件。客户活动。clientx ww){
返回错误的
};
var endx=事件。clientx-sb _ bkx；
var endy=事件。clienty-sb _ bky；
_ target。风格。left=endx ' px
_ target。风格。top=endy ' px
}
},
鼠标抬起：函数(e) {
document.onmousemove=null
}
}
})
/脚本
风格。ctn{
行高：50px
光标：指针；
字体大小：20px
文本对齐：居中；
浮动：左；
}。子：悬停{
背景：# e6dcdc
颜色：白色；
宽度：100像素
}。ctn1{
边框：1px纯绿；
宽度：100像素
}。ctn2{
边框：1px纯黑；
宽度：100像素
左边距：50px
}。固定{
宽度：100像素
高度：100像素
位置：固定；
背景：红色；
左：10px
top:15px；
光标：移动；
}
/风格
/body
/html
补充：vue 自定义指令-拖拽
主要思想：获取拖拽的数字正射影像图元素，在oDiv.onmousedown事件内获取鼠标相对数字正射影像图元素本身的位置：
var disX=ev。clientx-odiv。向左偏移；
var disY=ev。客户-奥迪夫。offsettop
再通过document.onmousemove事件计算数字正射影像图元素左上角相对视口的距离：
var l=ev。clientx-disX；
var t=ev.clientY-disY .
奥迪夫。风格。left=l ' px
奥迪夫。风格。top=t ' px
完整代码：
脚本
/* vue-自定义指令-拖拽*/
Vue.directive('drag '，function(){
var oDiv=this.el
oDiv.onmousedown=function(ev){
var disX=ev。clientx-odiv。向左偏移；
var disY=ev。客户-奥迪夫。offsettop
文档。onmousemove=function(ev){
var l=ev。clientx-disX；
var t=ev.clientY-disY .
奥迪夫。风格。left=l ' px
奥迪夫。风格。top=t ' px
};
document.onmouseup=function(){
document.onmousemove=null
document.onmouseup=null
};
};
});
window.onload=function(){
var vm=new Vue({
el:'#box '，
数据：{
味精："欢迎"
}
});
};
/脚本
/头
身体
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
总结
以上所述是小编给大家介绍的某视频剪辑软件鼠标移动实现鼠标拖动功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。