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

相关文章推荐

快乐的板凳 · 为什么QPainter可能拒绝在paintE ...· 1 周前 ·

酒量大的板栗 · log4j ...· 1 周前 ·

热心肠的红烧肉 · 【QT开发笔记-基础篇】| 第四章 ...· 8 小时前 ·

稳重的皮带 · QObject::connect: ...· 1 月前 ·

才高八斗的碗 · Java读文件修改默认换行符的实现_java ...· 5 月前 ·

一身肌肉的茶叶 · 使用Basemap添加指南针，显示经纬度刻度 ...· 10 月前 ·

活泼的风衣 · cors - Web worker ...· 11 月前 ·

大气的稀饭 · elasticsearch ...· 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 >

粉丝

友情链接：

推荐文章

快乐的板凳 · 为什么QPainter可能拒绝在paintEvent中工作？-腾讯云开发者社区-腾讯云

1 周前

酒量大的板栗 · log4j LogEventPatternConverter -如何只记录格式化的线程堆栈跟踪？-腾讯云开发者社区-腾讯云

1 周前

热心肠的红烧肉 · 【QT开发笔记-基础篇】| 第四章事件QEvent | 4.3 鼠标进入、离开事件_qt qtevent鼠标只有离开没有进入-CSDN博客

8 小时前

稳重的皮带 · QObject::connect: Cannot queue arguments of type 'string'-CSDN博客

1 月前

才高八斗的碗 · Java读文件修改默认换行符的实现_java_脚本之家

5 月前

一身肌肉的茶叶 · 使用Basemap添加指南针，显示经纬度刻度_basemap 加经度刻度-CSDN博客

10 月前

活泼的风衣 · cors - Web worker blocked by self.crossOriginIsolated on Cypress - Stack Overflow

11 月前

大气的稀饭 · elasticsearch 关键词查询-实现like查询_es like查询_stellaYdc的博客-CSDN博客

1 年前