溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹怎么在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 = 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 :></div>
<div v-drag :></div>
</div>
</body>關于怎么在vue中使用mousemove實現鼠標拖動功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
