< 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 >

粉丝

相关推荐

Vue3: 如何实现拖拽文件上传？

836阅读

·

6点赞

听别人说Vue的拖拽库都断代了，我第一个不服

11k阅读

·

179点赞

Vue3问题：如何实现组件拖拽实时预览功能？

2.1k阅读

·

38点赞

这个生成前端代码的工具很不错，支持生成vue代码，支持组件拖拽

1.9k阅读

·

31点赞

基于vue2.0实现拖拽排序

998阅读

·

12点赞

Vue2/Vue3/uniapp全端 实现列表上下拖拽drag排序

1.0k阅读

·

24点赞

vue实现盒子内拖动方块移动

281阅读

·

1点赞

vuedraggable 跨组件的拖拽实现

1.8k阅读

·

8点赞

面试必备，学会使用 Vue3 + ts 手写实现拖拽hook

2.9k阅读

·

23点赞

Vue 可拖拽组件 vue-grid-layout 使用入门

3.7k阅读

·

32点赞

友情链接：