Vue實現(xiàn)簡單的拖拽效果
更新時間：2020年08月25日 09:05:54 作者：joker.ma
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單的拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xiàn)簡單拖拽效果的具體代碼，供大家參考，具體內容如下
自定義指令v-drag
l 存在時 只能橫向拖拽
t 存在時 只能縱向拖拽
lt都存在時 可以任意方向拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖拽</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
background: red;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div id="box" v-drag.l.t="flag"></div>
</div>
<script>
Vue.directive("drag",(el,{modifiers,value})=>{
let{l,t}=modifiers;
el.addEventListener("mousedown",handleDownCb)
let disX,disY;
function handleDownCb(e){
disX=e.offsetX;
disY=e.offsetY;
// console.log(disX,disY)
document.addEventListener("mousemove",handleMoveCb);
document.addEventListener("mouseup",handleUpCb);
}
function handleMoveCb(e){
let x=e.clientX-disX;
let y=e.clientY-disY;
if((l&&t) && value){
el.style.left=x+"px";
el.style.top=y+"px";
return;
}
if(l&&value){
el.style.left=x+"px";
return;
}
if(t&&value){
el.style.top=y+"px";
return;
}
}
function handleUpCb(){
document.removeEventListener("mousemove",handleMoveCb);
document.removeEventListener("mouseup",handleUpCb);
}
})
let vm=new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</body>
</html>
注：
改變v-drag.l v-drag.t v-drag.l.t 即可實現(xiàn)橫向 縱向 任意方向的拖拽
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在進行vue開發(fā)的時候,我們不可避免會使用到導航菜單,element方便的為我們提供了導航菜單組件,下面這篇文章主要給大家介紹了關于el-menu實現(xiàn)橫向溢出截取的相關資料,需要的朋友可以參考下2022-06-06
本篇文章給大家分享了vue v-model動態(tài)生成的相關知識點以及實例代碼，有興趣的朋友參考學習下。2018-06-06
使用Vue.js報錯：ReferenceError: “Vue is not d
在前端開發(fā)中,ReferenceError: "Vue is not defined" 是一個常見的錯誤,該錯誤通常發(fā)生在項目中未正確引入 Vue.js 框架或代碼配置存在問題時,本篇文章將詳細分析該錯誤的成因,并提供多種解決方案,幫助開發(fā)者快速排查問題,需要的朋友可以參考下2024-12-12
這篇文章主要給大家分享的是Vue子組件接收父組件傳值的3種方式，主要通過聲明接收、接收數(shù)據(jù)的同時進行?類型限制、接收數(shù)據(jù)的同時對?數(shù)據(jù)類型、必要性、默認值?進行限制相關內容展開更多詳細的相關資料，需要的小伙伴可以參考一下2022-03-03
Vue3使用transition組件改變DOM屬性的方式小結
這篇文章主要為大家詳細介紹了Vue3中使用transition組件改變DOM屬性的常用方式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children詳解
element-ui 目前基本成為前端pc網(wǎng)頁端標準ui框架,下面這篇文章主要給大家介紹了關于elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue2.0項目實現(xiàn)路由跳轉的詳細方法,非常不錯，具有一定的參考借鑒借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要為大家介紹了功能強大的vue.js拖拽組件安裝應用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue + Elementui實現(xiàn)多標簽頁共存的方法
這篇文章主要介紹了Vue + Elementui實現(xiàn)多標簽頁共存的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
uniapp?vue3中使用webview在微信小程序實現(xiàn)雙向通訊功能
微信小程序的存在許多功能上的限制和約束,有些情況不得不去使用webview進行開發(fā)實現(xiàn)需求,這篇文章主要給大家介紹了關于uniapp?vue3中使用webview在微信小程序實現(xiàn)雙向通訊功能的相關資料,需要的朋友可以參考下2024-07-07