Vue.directive('dragx', (el, binding, vnode) => { // 默認參數 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) // 設置約束范圍 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元素選中時發送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 } // 移動多個元素時發送事件 bindUpdateDoms el.dispatchEvent(new CustomEvent('bindUpdateDoms', { detail: domData })) } else { // 移動單個元素移動時發送事件 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  }  // 發送下面2個事件主要是為了實現操作的撤銷和恢復功能，瀏覽器保存一個執行棧，一個移動表示一個事件  // 多個元素同時移動時發送事件 bindFinishMoveDoms  el.dispatchEvent(new CustomEvent('bindFinishMoveDoms', { detail: domData })) } else if (posData.x != edom.pageX && posData.y != edom.pageY) {  // 單個元素同時移動時發送事件 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 } }})

<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>

// 添加一個適當的事件監聽器<div @bindUpdate="bindUpdate" />// 創建并分發事件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>