vue.js?自定義指令(拖拽、拖動(dòng)、移動(dòng))?指令?v-drag詳解
1.main.js文件中添加已下代碼
Vue.directive('drag', { //1.指令綁定到元素上回立刻執(zhí)行bind函數(shù),只執(zhí)行一次 //2.每個(gè)函數(shù)中第一個(gè)參數(shù)永遠(yuǎn)是el,表示綁定指令的元素,el參數(shù)是原生js對(duì)象 //3.通過(guò)el.focus()是無(wú)法獲取焦點(diǎn)的,因?yàn)橹挥胁迦隓OM后才生效 bind: function (el) { }, //inserted表示一個(gè)元素,插入到DOM中會(huì)執(zhí)行inserted函數(shù),只觸發(fā)一次 inserted: function (el) { let odiv = el; //獲取當(dāng)前元素 let firstTime = '', lastTime = ''; el.onmousedown = function (e) { var disx = e.pageX - el.offsetLeft; var disy = e.pageY - el.offsetTop; // 給當(dāng)前元素添加屬性,用于元素狀態(tài)的判斷 odiv.setAttribute('ele-flag', false) odiv.setAttribute('draging-flag', true) firstTime = new Date().getTime(); document.onmousemove = function (e) { el.style.left = e.pageX - disx + 'px'; el.style.top = e.pageY - disy + 'px'; } document.onmouseup = function (event) { document.onmousemove = document.onmouseup = null; lastTime = new Date().getTime(); if ((lastTime - firstTime) > 200) { odiv.setAttribute('ele-flag', true) event.stopPropagation() } setTimeout(function () { odiv.setAttribute('draging-flag', false) }, 100) } } } })
2.組件中的使用
<template> <div class="drag" v-drag @click="handleDragClick"> 我是拖拽的div<div> <template> <script> methods:{ handleDragClick(e){ // 判斷拖拽組件的狀態(tài) let isDrag = false; try { isDrag = e.target.getAttribute('ele-flag') === 'true'; }catch (e) { } if(isDrag){ return; } // 當(dāng)推拽組件未在 拖動(dòng)狀態(tài) 執(zhí)行點(diǎn)擊事件 // todo 下面是執(zhí)行點(diǎn)擊事件的代碼 } } </script> <style> // 這里是拖拽 組件的樣式 .drag{ width:100px; height:100px; border:1px solid pink; } </style>
補(bǔ)充:vue自定義拖拽指令v-drag
<template> <div class="drag" v-drag ref="drag"></div> </template> <script> export default { name: 'Home', data(){ return{ positionX:'', positionY:'' } }, mounted () { this.$refs.drag.style.top = window.localStorage.getItem('top')+'px' this.$refs.drag.style.left = window.localStorage.getItem('left')+'px' }, directives: { drag: { // 指令的定義 bind: function (el,binding,vnode) { console.log(el); console.log(binding); console.log(vnode.context); let odiv = el; //獲取當(dāng)前元素 odiv.onmousedown = (e) => { //算出鼠標(biāo)相對(duì)元素的位置 let disX = e.clientX - odiv.offsetLeft; let disY = e.clientY - odiv.offsetTop; document.onmousemove = (e)=>{ //用鼠標(biāo)的位置減去鼠標(biāo)相對(duì)元素的位置,得到元素的位置 let left = e.clientX - disX; let top = e.clientY - disY; //綁定元素位置到positionX和positionY上面 vnode.context.positionX = top; vnode.context.positionY = left; window.localStorage.setItem('top',top) window.localStorage.setItem('left',left) //移動(dòng)當(dāng)前元素 odiv.style.left = left + 'px'; odiv.style.top = top + 'px'; }; document.onmouseup = () => { document.onmousemove = null; document.onmouseup = null; }; }; } } } } </script> <style lang="scss" scoped> .drag{ position: relative; /*定位*/ // top: 10px; // left: 10px; width: 200px; height: 200px; background: #666; /*設(shè)置一下背景*/ } </style>
到此這篇關(guān)于vue.js 自定義指令(拖拽、拖動(dòng)、移動(dòng)) 指令 v-drag的文章就介紹到這了,更多相關(guān)vue.js 自定義指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決vuex數(shù)據(jù)頁(yè)面刷新后初始化操作
這篇文章主要介紹了解決vuex數(shù)據(jù)頁(yè)面刷新后初始化操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue項(xiàng)目中使用AvueJs的詳細(xì)教程
Avue.js是基于現(xiàn)有的element-ui庫(kù)進(jìn)行的二次封裝,簡(jiǎn)化一些繁瑣的操作,核心理念為數(shù)據(jù)驅(qū)動(dòng)視圖,主要的組件庫(kù)針對(duì)table表格和form表單場(chǎng)景,這篇文章給大家介紹了vue項(xiàng)目中使用AvueJs的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧2022-10-10vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件實(shí)例詳解
這篇文章主要介紹了vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05vue.js過(guò)濾器+ajax實(shí)現(xiàn)事件監(jiān)聽(tīng)及后臺(tái)php數(shù)據(jù)交互實(shí)例
這篇文章主要介紹了vue.js過(guò)濾器+ajax實(shí)現(xiàn)事件監(jiān)聽(tīng)及后臺(tái)php數(shù)據(jù)交互,結(jié)合實(shí)例形式分析了vue.js前臺(tái)過(guò)濾器與ajax后臺(tái)數(shù)據(jù)交互相關(guān)操作技巧,需要的朋友可以參考下2018-05-05VUE跨域問(wèn)題Access to XMLHttpRequest at
今天發(fā)現(xiàn)一個(gè)錯(cuò)誤,VUE發(fā)送請(qǐng)求的時(shí)候不能請(qǐng)求到正確數(shù)據(jù),VUE跨域問(wèn)題Access to XMLHttpRequest at,本文就詳細(xì)的來(lái)介紹一下解決方法,感興趣的可以了解一下2022-05-05關(guān)于dev-tool安裝方法(手動(dòng)安裝版)
這篇文章主要介紹了關(guān)于dev-tool安裝方法(手動(dòng)安裝版),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07