vue拖拽添加的简单实现

本文主要介绍了vue拖拽添加的简单实现，具体如下：

效果图

并没有判断是否重复,没有删除旧数据

数据体eft"> <div class="title">数据源</div> <div class="dataBox" @dragleave.stop="dragleave($event, 'main')"> <div v-for="(item, i) in dataOrigin" :key="i" class="dataList" draggable @dragenter.prevent @dragover.prevent @dragstart.stop="dragstart($event, item)" @dragend.stop="dragEnd($event, item)"> {{ item.Name}} </div> </div> </div> <div class="MyShuttleCenter"></div> <div class="MyShuttleRight"> <div class="title">数据源</div> <div ref="MyShuttleRight" class="dataBox"> <div v-for="(item, i) in spaceList" :key="i" class="dataList" draggable @dragenter.prevent @dragover.prevent> {{ item.Name}} </div> </div> </div> </div></template><script>export default { name: '', components: {}, props: { dataOrigin: { type: Array }, space: { type: Array } }, data() { return { spaceList: this.space, isDragStatus: false } }, computed: {}, watch: {}, created() { }, mounted() { }, methods: { dragleave(e, item) { // console.log(e, item) if (item === 'main') { this.isDragStatus = true } else { this.isDragStatus = false } // console.log(this.isDragStatus) }, dragstart(e, item) { // console.log(e, item) }, dragEnd(e, item) { const top = this.$refs.MyShuttleRight.getBoundingClientRect().top const right = this.$refs.MyShuttleRight.getBoundingClientRect().right const bottom = this.$refs.MyShuttleRight.getBoundingClientRect().bottom const left = this.$refs.MyShuttleRight.getBoundingClientRect().left console.log(top, right, bottom, left) console.log(e.clientX, e.clientY, item) if (this.isDragStatus && e.clientY > top && e.clientY < bottom && e.clientX > left && e.clientX < right) { this.spaceList.push(item) console.log(this.spaceList.indexOf(item)) } } }}</script><style scoped lang="scss">.MyShuttle { width: 100%; height: 308px; display: flex; justify-content: space-between; // 左右盒子公共样式 .MyShuttleLeft, .MyShuttleRight { border: 1px solid #dddddd; border-collapse: collapse; .title { box-sizing: border-box; width: 100%; height: 40px; background: #f5f5f5; border-radius: 4px 4px 0px 0px; border-bottom: 1px solid #dddddd; padding: 10px 16px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333333; line-height: 20px; } .dataBox { width: 100%; height: 228px; overflow: auto; padding: 6px 0; .dataList { width: 96%; height: 40px; box-sizing: border-box; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #666; line-height: 20px; margin: 0 2% 10px; padding: 10px 16px; border: 1px solid #ddd; border-radius: 4px; user-select: none; cursor: pointer; &:hover { color: #01bc77; background: rgba(1, 188, 119, 0.1); } } } } .MyShuttleLeft { width: 362px; height: 100%; background: #ffffff; border-radius: 4px; } .MyShuttleCenter { width: 64px; height: 100%; } .MyShuttleRight { width: 362px; height: 100%; background: #ffffff; border-radius: 4px; }}</style>