DDR爱好者之家

vue实现div拖拽互换位置
站长资源 2024/11/16 佚名
52 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了vue实现div拖拽互换位置的具体代码，供大家参考，具体内容如下

template模板

<transition-group tag="div" class="container">
 <div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.color,width:'80px',height:'80px'}"
  draggable="true"
 @dragstart="handleDragStart($event, item)"
  @dragover.prevent="handleDragOver($event, item)"
  @dragenter="handleDragEnter($event, item)" 
  @dragend="handleDragEnd($event, item)" >
 </div>
</transition-group>

script：

<script>
export default {
 name: 'Toolbar',
 data () {
 return {
  items: [
  { key: 1, color: '#ffebcc'},
  { key: 2, color: '#ffb86c'},
  { key: 3, color: '#f01b2d'}
  ],
  
  dragging: null
 }
 },
 methods:{
 handleDragStart(e,item){
  this.dragging = item;
 },
 handleDragEnd(e,item){
  this.dragging = null
 },
 //首先把div变成可以放置的元素，即重写dragenter/dragover
 handleDragOver(e) {
  e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
 },
 handleDragEnter(e,item){
  e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
  if(item === this.dragging){
   return
  }
  const newItems = [...this.items]
  console.log(newItems)
  const src = newItems.indexOf(this.dragging)
  const dst = newItems.indexOf(item)
 
  newItems.splice(dst, 0, ...newItems.splice(src, 1))
 
  this.items = newItems
 }
 }
}
</script>
 
<style scoped>
 .container{
  width: 80px;
  height: 300px;
  position: absolute;
  left: 0;
  display:flex;
  flex-direction: column;
  padding: 0;
 }
 .item {
  margin-top: 10px;
  transition: all linear .3s
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米