小編這次要給大家分享的是用實例分析Vue使用自定義指令實現(xiàn)拖拽行為，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
創(chuàng)新互聯(lián)建站長期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為沙坪壩企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站設(shè)計，沙坪壩網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
本文實例講述了Vue使用自定義指令實現(xiàn)拖拽行為。分享給大家供大家參考，具體如下：
通過自定義指令的方式實現(xiàn)拖拽效果，預(yù)期的使用方式為：
XXXX
更重要的一個需求點：
比如：
test
曾經(jīng)使用過vue-resizable，由于該組件是通過事件捕獲的方式實現(xiàn)的，拖拽元素的子元素也會觸發(fā)拖拽行為，不符合開發(fā)需求，所以自行實現(xiàn)了拖拽指令，相關(guān)源碼如下。
無任何依賴，復(fù)制即可使用
重慶分公司
重慶分公司
/**
* @file 自定義拖拽命令
*/
import Vue from 'vue';
const Drag = {
install(Vue: any) {
// 如需禁止拖拽元素內(nèi)部某些元素觸發(fā)拖拽，在內(nèi)部不可觸發(fā)拖拽元素上添加@mousedown.native.stop即可
Vue.directive('drag', {
bind(el: any) {
el.style.position = 'absolute';
el.style.zIndex = el.style.zIndex || '3000';
},
inserted(el: any) {
// 設(shè)置元素初始位置
const boundingClientRect = el.getBoundingClientRect();
el.style.left = boundingClientRect.x + 'px';
el.style.top = boundingClientRect.y + 'px';
// 將拖拽元素置于body子元素，防止被relative的父元素遮擋
document.body.appendChild(el);
let originX: number;
let originY: number;
const mouseDownHandler = (evt: MouseEvent) => {
originX = evt.clientX - el.offsetLeft;
originY = evt.clientY - el.offsetTop;
el.style.cursor = 'pointer';
};
const mouseMoveHandler = (evt: MouseEvent) => {
if (evt.buttons === 1 && originX && originY) {
el.style.left = evt.clientX - originX + 'px';
el.style.top = evt.clientY - originY + 'px';
}
};
const mouseUpHandler = () => {
el.style.cursor = 'default';
};
el.addEventListener('mousedown', mouseDownHandler);
el.addEventListener('mousemove', mouseMoveHandler);
el.addEventListener('mouseup', mouseUpHandler);
el.__mouseDownHandler__ = mouseDownHandler;
el.__mouseMoveHandler__ = mouseMoveHandler;
el.__mouseUpHandler__ = mouseUpHandler;
},
unbind(el: any) {
el.removeEventListener('mousedown', el.__mouseDownHandler__);
el.removeEventListener('mousemove', el.__mouseMoveHandler__);
el.removeEventListener('mouseup', el.__mouseUpHandler__);
// 當(dāng)父組件銷毀觸發(fā)unbind的時候需要手動刪除這個節(jié)點，不然會一直存留在body中
el.parentNode.removeChild(el);
}
});
}
};
Vue.use(Drag);
export default Drag;看完這篇關(guān)于用實例分析Vue使用自定義指令實現(xiàn)拖拽行為的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。
