目标对象响应的封装
<template>
<div class="drag-target" ref="dragTarge" @dragleave="dragleaveHandle($event)" @dragenter="dragenterHandle($event)" @drop='dropHandle($event)'
@dragover='dragoverHandle($event)'>
<slot></slot>
</div>
</template>
<script>
/**
* 拖拽目标
*/
export default {
name: 'DragTarget',
methods: {
/**
* 添加css类
*/
addCssClass(){
this.$refs.dragTarge.classList.add("drag-selecd");
},
/**
* 移除css类
*/
movueCssClass(){
this.$refs.dragTarge.classList.remove("drag-selecd");
},
/**
* 目标对象被源对象拖动着进入
*/
dragenterHandle(event) {
this.$emit('dragenterHandle', event)
this.addCssClass()
},
/**
* 目标对象被源对象拖动着悬停在上方
*/
dragoverHandle(event) {
event.preventDefault() // 必须
this.$emit('dragoverHandle', event)
},
/**
* 源对象拖动着在目标对象上方释放/松手
*/
dropHandle(event) {
event.preventDefault() // 必须
this.movueCssClass();
// 获取源对象传递的参数
let id = event.dataTransfer.getData('id')
this.$emit('dropHandle', event)
},
/**
* 源对象拖动着离开了目标对象
*/
dragleaveHandle(event) {
this.$emit('dragleaveHandle', event)
this.movueCssClass();
}
}
}
</script>
<style scoped>
.drag-target {
height: 100%;
}
.drag-selecd {
border: 2px solid #2e93ff;
}
</style>
拖拽的源对象
源对象使用 ant design vue 的tree组件
<template>
<a-tree :draggable="true" @dragstart="dragstart"/>
</template>
<script>
import { httpAction } from '@/api/manage'
export default {
data() {
return {
datas: []
}
},
created() {
},
methods: {
/**
* 拖拽事件
* @param args {event, node}
*/
dragstart(args) {
let { event, node } = args
// node.$vnode.data中含有我们传入的自定义的数据
let type = node.$vnode.data.props.maps.type
if (type === 'aaa') {
// 设置我们要传递给目标对象的数据，k v 形式
event.dataTransfer.setData('id', node.$vnode.data.key)
}
},
},
model: {
prop: 'value',
event: 'change'
}
}
</script>
<style lang="less">
</style>
