怎么在vue中利用自定义指令实现一个拖拽功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
成都创新互联公司是一家集成都网站设计、网站建设、网站页面设计、网站优化SEO优化为一体的专业网站设计公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。
1.vue自定义指令
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
}
}
})2.自定义事件
在vue组件使用自定义指令并添加事件监听器
如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。
