vue使用自定義指令實現(xiàn)拖拽
更新時間：2021年01月29日 09:38:21 作者：mht1829
這篇文章主要為大家詳細介紹了vue使用自定義指令實現(xiàn)拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
需求背景，工作中需要實現(xiàn)一個自定義打印模板的需求，能夠?qū)崿F(xiàn)單個及多個dom元素的同時拖拽，也能通過外部的input元素修改dom元素的樣式。在npm和GitHub上找了各種已有的vue組件，不夠靈活，效果都不是自己想要的
1.vue自定義指令
Vue.directive('dragx', (el, binding, vnode) => {
// 默認參數(shù)
let defaultOpts = {
dragDirection: 'n, e, s, w, ne, se, sw, nw, all',
dragContainerId: '', //
dragBarClass: '', // 類選擇器
canDrag: true,
canResize: true,
multiSelect: false
}
let isMove = false
let isResize = false
let constraintDom
let constraintRect
let constraintRectHeight
let constraintRectWidth
binding.value = binding.value || {}
let cfg = Object.assign({}, defaultOpts, binding.value)
if (cfg.dragContainerId) {
constraintDom = document.querySelector('#' + cfg.dragContainerId)
constraintRect = constraintDom.getBoundingClientRect()
constraintRectHeight = constraintRect.height
constraintRectWidth = constraintRect.width
}
let getStyleNumValue = (style, key) => parseInt(style.getPropertyValue(key), 10)
// 設(shè)置約束范圍
function setConstraint (data) {
if (cfg.dragContainerId) {
if (data.left <= 0) data.left = 0
if (data.top <= 0) data.top = 0
if (data.top + data.height + data.borderTop + data.borderBottom >= constraintRectHeight) data.top = constraintRectHeight - data.height - data.borderTop - data.borderBottom
if (data.left + data.width + data.borderLeft + data.borderRight > constraintRectWidth) data.left = constraintRectWidth - data.width - data.borderLeft - data.borderRight
}
}
el.onmousemove = e => {
if (cfg.dragBarClass.length > 0 && e.target.classList.contains(cfg.dragBarClass) && cfg.canDrag) {
el.style.cursor = 'move'
return
}
el.style.cursor = ''
}
el.onmouseleave = e => {
el.style.cursor = ''
}
el.onmousedown = e => {
let clickId = (e.target || e.srcElement).id
let posData = {
x: e.pageX, y: e.pageY
}
el.onmouseup = e => {
// dom元素選中時發(fā)送active事件
if (!cfg.active) el.dispatchEvent(new CustomEvent('bindActive', { 'detail': { ...posData } }))
}
isMove = false
if (cfg.dragBarClass.length > 0 && !e.target.classList.contains('icon-icon-resize')) {
isMove = true
isResize = false
document.body.style.cursor = 'move'
} else if (e.target.classList.contains('icon-icon-resize')) {
isMove = false
isResize = true
}
let style
let rect
let data
let tableStyle
style = window.getComputedStyle(el)
rect = el.getBoundingClientRect()
data = {
width: getStyleNumValue(style, 'width'),
height: getStyleNumValue(style, 'height'),
left: getStyleNumValue(style, 'left'),
top: getStyleNumValue(style, 'top'),
borderLeft: getStyleNumValue(style, 'border-left-width'),
borderTop: getStyleNumValue(style, 'border-top-width'),
borderRight: getStyleNumValue(style, 'border-right-width'),
borderBottom: getStyleNumValue(style, 'border-bottom-width'),
deltX: e.pageX - rect.left,
deltY: e.pageY - rect.top,
startX: rect.left,
startY: rect.top
}
if (el.id.indexOf(THSIGN) > -1 || el.id.indexOf(TDSIGN) > -1) {
let table = document.getElementById(el.id.split(SEPARATOR)[0])
tableStyle = window.getComputedStyle(table)
data.left = getStyleNumValue(tableStyle, 'left')
data.top = getStyleNumValue(tableStyle, 'top')
}
document.onmousemove = edom => {
if (edom.ctrlKey) return
if (isResize) {
data.width = Math.round(edom.pageX - data.startX + data.borderLeft + data.borderRight)
data.height = Math.round(edom.pageY - data.startY + data.borderBottom + data.borderTop)
}
// 處理組件 移動
if (isMove && cfg.canDrag && (cfg.active || cfg.multiSelect)) {
let targetPageX = edom.pageX
let targetPageY = edom.pageY
let deltX = targetPageX - data.startX - data.deltX
let deltY = targetPageY - data.startY - data.deltY
let newLeft = Math.round(getStyleNumValue(style, 'left') || '0', 10) + deltX
let newTop = Math.round(getStyleNumValue(style, 'top') || '0', 10) + deltY
data.left = Math.round(newLeft)
data.top = Math.round(newTop)
data.startX = data.startX + deltX
data.startY = data.startY + deltY
setConstraint(data)
if (el.id.indexOf(THSIGN) > -1 || el.id.indexOf(TDSIGN) > -1) {
let newLeft = Math.round(getStyleNumValue(tableStyle, 'left') || '0', 10) + deltX
let newTop = Math.round(getStyleNumValue(tableStyle, 'top') || '0', 10) + deltY
data.left = Math.round(newLeft)
data.top = Math.round(newTop)
}
}
if (cfg.multiSelect) {
let domData = {
el: clickId,
x: edom.pageX,
y: edom.pageY
}
// 移動多個元素時發(fā)送事件 bindUpdateDoms
el.dispatchEvent(new CustomEvent('bindUpdateDoms', { detail: domData }))
} else {
// 移動單個元素移動時發(fā)送事件 bindUpdate
el.dispatchEvent(new CustomEvent('bindUpdate', { detail: data }))
}
document.onmouseup = edom => {
if (cfg.multiSelect && posData.x != edom.pageX && posData.y != edom.pageY) {
let domData = {
x: edom.pageX,
y: edom.pageY
}
// 發(fā)送下面2個事件主要是為了實現(xiàn)操作的撤銷和恢復(fù)功能，瀏覽器保存一個執(zhí)行棧，一個移動表示一個事件
// 多個元素同時移動時發(fā)送事件 bindFinishMoveDoms
el.dispatchEvent(new CustomEvent('bindFinishMoveDoms', { detail: domData }))
} else if (posData.x != edom.pageX && posData.y != edom.pageY) {
// 單個元素同時移動時發(fā)送事件 bindFinishMove
el.dispatchEvent(new CustomEvent('bindFinishMove', { detail: data }))
}
document.body.style.cursor = ''
document.onmousemove = null
document.onmouseup = null
isMove = false
}
}
document.onmouseup = edom => {
document.body.style.cursor = ''
document.onmousemove = null
document.onmouseup = null
isMove = false
}
}
})
2.自定義事件
在vue組件使用自定義指令并添加事件監(jiān)聽器
如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數(shù)能夠接受所有合法的 JavaScript 表達式。
<div v-dragx="{ dragBarClass: 'drag', dragContainerId: 'page', multiSelect, active }"
@bindUpdate="bindUpdate"
@bindActive="activeDom"
@bindUpdateDoms="bindUpdateDoms"
@bindFinishMove="pushStackByDom"
@bindFinishMoveDoms="pushStackByDoms"
:style="style"
:id="uId"
class="drag-wrap">
</div>
// 添加一個適當?shù)氖录O(jiān)聽器
<div @bindUpdate="bindUpdate" />
// 創(chuàng)建并分發(fā)事件
el.dispatchEvent(new CustomEvent('bindUpdate', { detail: data }))
字段說明
<template>
<div v-dragx="{ dragBarClass: 'drag', dragContainerId: 'page', multiSelect, active }"
@bindUpdate="bindUpdate"
@bindActive="activeDom"
@bindUpdateDoms="bindUpdateDoms"
@bindFinishMove="pushStackByDom"
@bindFinishMoveDoms="pushStackByDoms"
:style="style"
:id="uId"
class="drag-wrap">
<slot></slot>
<span class="iconfont icon-icon-resize"></span>
</div>
</template>
<script>
export default {
data () {
return {
prevSize: {}
}
},
props: {
item: {
type: Object,
default: () => ({})
},
isVariable: {
type: Boolean,
default: false
},
active: {
type: Boolean,
default: false
},
size: {
type: Object,
default: () => ({
x: 200,
y: 200,
w: 200,
h: 24
})
},
multiSelect: {
type: Boolean,
default: false
},
uId: {
type: String,
required: true
},
dragContainerId: {
type: String
}
},
computed: {
style: function () {
return {
top: this.size.y + 'px',
left: this.size.x + 'px',
width: this.size.w + 'px',
height: this.size.h + 'px'
}
}
},
methods: {
activeDom (e) {
this.$emit('activated', this.uId, e.detail.x, e.detail.y)
this.prevSize = {
...this.size
}
},
bindUpdate (event) {
let data = event.detail
this.size.x = data.left
this.size.y = data.top
this.$store.dispatch('RESIZE_ID', { id: this.uId, ...data })
this.$emit('resizing', { ...data })
},
bindUpdateDoms (e) {
this.$emit('movingDoms', e.detail)
},
pushStackByDom (e) {
this.$store.dispatch('RESIZE_ID', { prevSize: this.prevSize, id: this.uId, ...event.detail })
},
pushStackByDoms (e) {
this.$emit('finishMoveDoms', e.detail)
}
}
}
</script>
<style scoped>
.drag {
background-color: #ccc;
border-top: solid 1px rgba(33, 61, 223, 0.541);
border-bottom: solid 1px rgba(33, 61, 223, 0.541);
}
.drag-wrap {
position: absolute;
}
.icon-icon-resize {
position: absolute;
right: 0;
bottom: 0;
line-height: 12px;
cursor: se-resize;
font-size: 12px;
color: #666;
}
</style>
因為涉及到多個組件的通信，因此使用vuex，把模板信息和執(zhí)行棧全部保存在vuex中
最終實現(xiàn)的效果如下圖所示
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?TypeScript?實現(xiàn)useRequest詳情
本文介紹了Vue3?TypeScript實現(xiàn)useRequest詳情，useRequest可能是目前社區(qū)中最強大，最接地氣的請求類?Hooks了?？梢愿采w99%的網(wǎng)絡(luò)請求場景，無論是讀還是寫，無論是普通請求還是分頁請求，無論是緩存還是防抖節(jié)流，通通都能支持，關(guān)于其介紹需要的小伙伴可以參考一下2022-05-05
vue+iview?Table表格多選切換分頁保持勾選狀態(tài)
這篇文章主要為大家詳細介紹了vue+iview?Table表格多選切換分頁保持勾選狀態(tài)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue3+vite應(yīng)用中添加sass預(yù)處理器問題
這篇文章主要介紹了vue3+vite應(yīng)用中添加sass預(yù)處理器問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue使用js-audio-recorder實現(xiàn)錄制,播放與下載音頻功能
這篇文章主要為大家詳細介紹了Vue如何使用js-audio-recorder實現(xiàn)錄制,播放與下載音頻功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2023-12-12
這篇文章主要介紹了vue-cli在 history模式下的配置詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
解決vue-router 二級導(dǎo)航默認選中某一選項的問題
今天小編就為大家分享一篇解決vue-router 二級導(dǎo)航默認選中某一選項的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
element日期選擇器el-date-picker樣式圖文詳解
最近寫的項目里面有一個功能是日期選擇功能,第一反應(yīng)是使用element里面的el-date-picker組件,下面這篇文章主要給大家介紹了關(guān)于element日期選擇器el-date-picker樣式的相關(guān)資料,需要的朋友可以參考下2022-09-09
uniapp開發(fā)打包成H5部署到服務(wù)器的詳細步驟
前端使用uniapp開發(fā)項目完成后，需要將頁面打包，生成H5的靜態(tài)文件，部署在服務(wù)器上這樣通過服務(wù)器鏈接地址，直接可以在手機上點開來訪問，下面小編給大家講解uniapp開發(fā)打包成H5部署到服務(wù)器的步驟，感興趣的朋友一起看看吧2022-11-11
這篇文章主要介紹了封裝一個Vue文件上傳組件案例詳情，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
本篇是我對vue使用過程中以及對一些社區(qū)朋友提問我的問題中做的一些總結(jié)，感興趣的朋友跟隨腳本之家小編一起學習吧2018-02-02