Vue拖拽调整元素顺序

最新推荐文章于 2024-08-09 11:26:56 发布

北海之灵

最新推荐文章于 2024-08-09 11:26:56 发布

阅读量2.2k

点赞数 2

分类专栏： Vue 文章标签： javascript vue 拖拽改变顺序

本文链接：https://blog.csdn.net/xukongjing1/article/details/114654183

版权

Vue 专栏收录该内容

35 篇文章 19 订阅

订阅专栏

Vue中通过拖拽来调整元素的顺序，开发中碰到这个需求，网上找了找资料，写个例子记录下。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      [v-cloak]{
        display: none;
      }
      .box1{
        background: #f9f9f9;
        padding: 10px 15px;
      }
      #app{
        width: 30vw;
        margin-left:30vw;
        height: 100vh;
      }
    </style>
  </head>
<body>
  <div id='app' v-cloak>
    <transition-group tag="div" class="">
      <div v-for="(item,index) in list" :key="index" ref="list"
        draggable="true"
        @dragstart="handleDragStart($event, item)"
        @dragover.prevent="handleDragOver($event, item)"
        @dragenter="handleDragEnter($event, item)"
        @dragend="handleDragEnd($event, item)">
        <div class="box1">
          <div class="name">id:{{item.id}}----{{item.name}}</div>
        </div>
      </div>
    </transition-group>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
  new Vue({
    el:'#app',
    data:{
      list:[
        {id:'1', name:'张三'},
        {id:'2', name:'李四'},
        {id:'3', name:'王五'},
      ],
      dragging: null,//正在拖拽的 元素
    },
    created(){

    },
    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.list]
        //console.log(newItems)
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)
        newItems.splice(dst, 0, ...newItems.splice(src, 1))
        this.list = newItems;
      },
 
    },
  })
</script>
</html>

效果如下：