可拖拽列表+点击效果

可拖拽列表是参考这位大佬的，在他的基础上添加了点击后的效果，实现一个类似菜单一样的列表，可以拖拽。思路和一般的菜单点击一样，只是从常见的匹配index变成匹配id。

ps：gif的掉帧好严重。。。。仅供参考。。。

代码如下。

<template>
  <div class="listAll">
    <transition-group name="drag" class="list" tag="ul">
      <li
        @dragenter="dragenter($event, index)"
        @dragover="dragover($event, index)"
        @dragstart="dragstart($event,index)"
        draggable="true"
        v-for="(item, index) in list"
        :key="item.title"
        :id="item.id"
        class="list-item el-dropdown-menu__item"
        @click="dataLink(item)"
        :class="{isactive:dragId===item.id}"
        >
        <div>
          {
         
  { item.title }}
        </div>
        <div style="font-size: 8px">
          {
         
  {item.link_sum}}
        </div>
      </li>
    </transition-group>
  </div>
</template>



<script>

export default {
  name:list,
  props:{
    list:[]
  },
  data() {
    return {
      dragIndex: "",
      enterIndex: "",
      dragId:"",
    };
  },
  methods: {
    //关于拖拽的函数
    dragstart(e,index) {
      this.dragIndex = index;
    },
    dragenter(e, index) {
      e.preventDefault();
      if (this.dragIndex !== index) {
        const moving = this.list[this.dragIndex];
        this.list.splice(this.dragIndex, 1);
        this.list.splice(index, 0, moving);
        this.dragIndex = index;
      }
    },
    dragover(e, index) {
      // this.selectId = this.dragId
      e.preventDefault();
    },
    dataLink(val){
      //点击样式
      this.dragId = val.id
      //点了就传给vuex,得到这组数据，数据里有id链接数等等
      this.$store.state.group = val
    }
  }
};
</script>
<style scoped>
.listAll{
  height: 100%;
}
.list {
  margin: 0;
  list-style: none;
  padding-left: 0;
  border: 0;

}
.drag-move {
  transition: transform 0.3s;
}
.list-item {
  cursor: pointer;
  width:100%;
  line-height: 50px;
  text-align: center;
  padding: 0 !important;
  display: flex;
  justify-content: space-around;
}
.isactive{
  background-color: rgb(236, 245, 255);
}
</style>

在大佬的代码上修改了一些地方。绑定了<li>的id属性，用点击事件把id记录下来，然后在把匹配当前点击的li的id和存的id。