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拖拽添加的簡單實現的文章就介紹到這瞭,更多相關vue拖拽添加內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!