Vue實(shí)現(xiàn)簡單的拖拽效果

更新時(shí)間：2020年08月25日 09:05:54 作者：joker.ma

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單的拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue實(shí)現(xiàn)簡單拖拽效果的具體代碼，供大家參考，具體內(nèi)容如下

自定義指令v-drag

l 存在時(shí) 只能橫向拖拽

t 存在時(shí) 只能縱向拖拽

lt都存在時(shí) 可以任意方向拖拽

<!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 即可實(shí)現(xiàn)橫向縱向任意方向的拖拽

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
拖拽

相關(guān)文章

el-menu實(shí)現(xiàn)橫向溢出截取的示例代碼
在進(jìn)行vue開發(fā)的時(shí)候,我們不可避免會(huì)使用到導(dǎo)航菜單,element方便的為我們提供了導(dǎo)航菜單組件,下面這篇文章主要給大家介紹了關(guān)于el-menu實(shí)現(xiàn)橫向溢出截取的相關(guān)資料,需要的朋友可以參考下
2022-06-06
vue v-model動(dòng)態(tài)生成詳解
本篇文章給大家分享了vue v-model動(dòng)態(tài)生成的相關(guān)知識(shí)點(diǎn)以及實(shí)例代碼，有興趣的朋友參考學(xué)習(xí)下。
2018-06-06
使用Vue.js報(bào)錯(cuò)：ReferenceError: “Vue is not d
在前端開發(fā)中,ReferenceError: "Vue is not defined" 是一個(gè)常見的錯(cuò)誤,該錯(cuò)誤通常發(fā)生在項(xiàng)目中未正確引入 Vue.js 框架或代碼配置存在問題時(shí),本篇文章將詳細(xì)分析該錯(cuò)誤的成因,并提供多種解決方案,幫助開發(fā)者快速排查問題,需要的朋友可以參考下
2024-12-12
分享Vue子組件接收父組件傳值的3種方式
這篇文章主要給大家分享的是Vue子組件接收父組件傳值的3種方式，主要通過聲明接收、接收數(shù)據(jù)的同時(shí)進(jìn)行?類型限制、接收數(shù)據(jù)的同時(shí)對?數(shù)據(jù)類型、必要性、默認(rèn)值?進(jìn)行限制相關(guān)內(nèi)容展開更多詳細(xì)的相關(guān)資料，需要的小伙伴可以參考一下
2022-03-03
Vue3使用transition組件改變DOM屬性的方式小結(jié)
這篇文章主要為大家詳細(xì)介紹了Vue3中使用transition組件改變DOM屬性的常用方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01
elementUI如何動(dòng)態(tài)給el-tree添加子節(jié)點(diǎn)數(shù)據(jù)children詳解
element-ui 目前基本成為前端pc網(wǎng)頁端標(biāo)準(zhǔn)ui框架,下面這篇文章主要給大家介紹了關(guān)于elementUI如何動(dòng)態(tài)給el-tree添加子節(jié)點(diǎn)數(shù)據(jù)children的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
vue2.0項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)的方法詳解
這篇文章主要介紹了vue2.0項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)的詳細(xì)方法,非常不錯(cuò)，具有一定的參考借鑒借鑒價(jià)值，需要的朋友可以參考下
2018-06-06
功能強(qiáng)大的vue.js拖拽組件安裝應(yīng)用
這篇文章主要為大家介紹了功能強(qiáng)大的vue.js拖拽組件安裝應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
Vue + Elementui實(shí)現(xiàn)多標(biāo)簽頁共存的方法
這篇文章主要介紹了Vue + Elementui實(shí)現(xiàn)多標(biāo)簽頁共存的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能
微信小程序的存在許多功能上的限制和約束,有些情況不得不去使用webview進(jìn)行開發(fā)實(shí)現(xiàn)需求,這篇文章主要給大家介紹了關(guān)于uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能的相關(guān)資料,需要的朋友可以參考下
2024-07-07