vue3 拖动元素到另一个元素中，拖动到删除中

相关文章推荐

活泼的红烧肉 · 【Day11】發生什麼事 - ...· 4 月前 ·

急躁的手套 · ondragover 事件 | · 4 月前 ·

完美的苦瓜 · 吃B群尿黃=沒吸收？專家破解3大尿黃原因與常見迷思· 1 年前 ·

销魂的自行车 · 《音乐家》全国限时点映观众评价满满的都是泪点· 1 年前 ·

幸福的番茄 · 好安森糖尿病治疗仪 ...· 1 年前 ·

想旅行的山羊 · 明道云常见问题与解决方案 | ...· 1 年前 ·

拉风的勺子 · python ...· 1 年前 ·

< div class = "pl30 pr30" > class = "b-a-1 line-color-main1 changheand pt10 pb10 pl15 pr15 br10 mt20" v-for = "item in forList.list" :key = "item.id" :id = "item.id" draggable = "true" {{ item.title }} </ div > </ div > < div class = "flex-1" > < div class = "p30 b-a-1 line-color-main2 mt20" id = "quyu1" > 区域1 </ div > < div class = "p30 b-a-1 line-color-main2 mt20" id = "quyu2" > 区域2 </ div > < div class = "p30 b-a-1 line-color-main2 mt20" id = "shanchu" > 删除 </ div > </ div > </ div > </ div > </template> < script setup > import { reactive, ref, onMounted } from 'vue' let forList = reactive ({ list : [ { title : '设备1' , id : 'one' }, { title : '设备2' , id : 'two' }, { title : '设备3' , id : 'three' } function initBox ( ) { // 拖拽 let drag = document . getElementsByClassName ( 'changheand' ) // 区域1 let dropArea = document . getElementById ( 'quyu1' ) // 区域2 let quyu2 = document . getElementById ( 'quyu2' ) // 删除 let shanchu = document . getElementById ( 'shanchu' ) // 选择区域内的设备元素 for ( let i = 0 ; i < drag. length ; i++) { drag[i]. ondragstart = ( e ) => { e. dataTransfer . setData ( 'id' , e. target . id ) drag[i]. ondragend = ( e ) => { console . log (e, 'dragend----------' ) e. dataTransfer . clearData ( 'id' ) // 区域二的拖动拖动 quyu2. ondragover = ( event ) => { event. target . style . borderStyle = 'dashed' event. preventDefault () quyu2. ondrop = ( event ) => { event. target . style . borderStyle = 'solid' const id = event. dataTransfer . getData ( 'id' ) quyu2. appendChild ( document . getElementById (id)) quyu2. addEventListener ( 'dragleave' , ( event ) => { event. target . style . borderStyle = 'solid' // 拖动到改区域变为可以的样式 dropArea. addEventListener ( 'dragover' , ( event ) => { event. preventDefault () // 拖动结束 dropArea. addEventListener ( 'drop' , ( event ) => { const id = event. dataTransfer . getData ( 'id' ) dropArea. appendChild ( document . getElementById (id)) // 删除的拖动 shanchu. ondragover = ( event ) => { event. target . style . borderStyle = 'dashed' event. preventDefault () shanchu. ondrop = ( event ) => { event. target . style . borderStyle = 'solid' const id = event. dataTransfer . getData ( 'id' ) let index = forList. list . findIndex ( ( item ) => item. id === id) forList. list . splice (index, 1 ) onMounted ( () => { initBox () </ script >

粉丝

友情链接：