溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是用實例分析Vue使用自定義指令實現拖拽行為，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
本文實例講述了Vue使用自定義指令實現拖拽行為。分享給大家供大家參考，具體如下：
通過自定義指令的方式實現拖拽效果，預期的使用方式為：
<div v-drag> XXXX </div>
更重要的一個需求點：
比如：
<div v-drag> <el-button @mousedown.native.stop>test</el-button> </div>
曾經使用過vue-resizable，由于該組件是通過事件捕獲的方式實現的，拖拽元素的子元素也會觸發拖拽行為，不符合開發需求，所以自行實現了拖拽指令，相關源碼如下。
無任何依賴，復制即可使用
/**
* @file 自定義拖拽命令
*/
import Vue from 'vue';
const Drag = {
install(Vue: any) {
// 如需禁止拖拽元素內部某些元素觸發拖拽，在內部不可觸發拖拽元素上添加@mousedown.native.stop即可
Vue.directive('drag', {
bind(el: any) {
el.style.position = 'absolute';
el.style.zIndex = el.style.zIndex || '3000';
},
inserted(el: any) {
// 設置元素初始位置
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__);
// 當父組件銷毀觸發unbind的時候需要手動刪除這個節點，不然會一直存留在body中
el.parentNode.removeChild(el);
}
});
}
};
Vue.use(Drag);
export default Drag;看完這篇關于用實例分析Vue使用自定義指令實現拖拽行為的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
