这篇文章主要为大家展示了“vue如何实现拖拽添加”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何实现拖拽添加”这篇文章吧。
效果图
并没有判断是否重复,没有删除旧数据
数据体
<MyShuttle :dataOrigin='[ { Name:"数据001", Id:"数001", }, { Name:"数据002", Id:"数001", }, { Name:"数据003", Id:"数001", }]' :space='[{ Name:"右001", Id:"右001", }]' />
代码
draggable开启可拖动
@dragenter.prevent @dragover.prevent // 阻止浏览器默认行为,不然会显示一个叉叉,不好看
阻止默认行为
@dragleave.stop=“dragleave($event, ‘main')”
进入离开当前元素都会触发
@dragend.stop=“dragEnd($event, item)”
放下拖拽内容触发
标记 这个很重要!!! 这个决定了拖拽事件的行为。当点击开始拖拽之后,鼠标点击所在的位置就是标记。
dragstart:当单击下鼠标,并移动之后执行。
drag:在dragstart执行之后,鼠标在移动时连续触发。
dragend:当拖拽行为结束,也就是松开鼠标的时候触发。
dragenter:当正在拖拽的元素的标记进入某个Dom元素时触发,自身首先会触发。被进入的Dom元素会触发这个事件。
dragover:当拖拽的元素的标记在进入的Dom元素上移动时触发,在自身移动时也会触发。
dragleave:当拖拽的元素在离开进入的Dom时触发。
H5拖拽属性 draggable
draggable:当需要某个元素可以拖拽时,需设置为true,默认为false。选中的文本、图片、链接默认可以拖拽。
DataTransfer对象:该属性用于保存拖放的数据和交互信息,该组件没有使用到,暂忽略。
当鼠标移动到目标div盒子才会追加,简单的才最能说明问题
<template> <div class="MyShuttle"> <div class="MyShuttleLeft"> <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>
以上是“vue如何实现拖拽添加”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。