vue拖拽排序(vue-slicksort)点击失效的解决方式

最近有个需求是常用应用模块，应用可拖拽进行排序，也可以点击进入新的页面，但是发现

SlickItem绑定click事件无效，然后找到其它方式解决了这个问题。 利用 sortStart和sortEnd事件判断拖拽开始和结束的坐标，如果坐标一致就视为点击就可以啦~

<!-- 拖拽 -->
      <SlickList
        v-model="alwaysList"
        :lock-to-container-edges="true"
        axis="xy"
        lock-axis="xy"
        class="slicksort_wrap"
        @input="getChangeList"
        @sort-start="moveStart"
        @sort-end="moveEnd"
      >
        <!-- slick_item_' + (index + 1) -->
        <SlickItem v-for="(item, index) in alwaysList" :key="index" :index="index" class="slick_item appli">
          <div class="iconBlock" :style="{background: item.color}">
            <svg-icon class="img" :icon-class="item.icon ? item.icon : '#'" />
          </div>
          <div class="text">{{ item.menuName }}</div>
        </SlickItem>
        <div class="edit" @click="addMenu">编辑</div>
      </SlickList>

　　

<script>
import { SlickList, SlickItem } from 'vue-slicksort';
export default {
  components: {
    SlickList,
    SlickItem
  },
  data() {
    return {
      alwaysList: [],
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      lastIndex: 0
    };
  },
  methods: {
    moveStart(e) {
      this.startX = e.event.x;
      this.startY = e.event.y;
      this.lastIndex = e.index;
    },
    moveEnd(e) {
      this.endX = e.event.x;
      this.endY = e.event.y;
    },
    // 拖拽完成后重新排序
    getChangeList(list) {
      // 判断点击或者拖拽
      if (this.startX === this.endX && this.startY === this.endY) {
        this.$router.push(this.alwaysList[this.lastIndex].parentPath + '/' + this.alwaysList[this.lastIndex].path);
      } else {
        console.log(list);
      }
    }
  }
};
</script>

　　

标签：vue,lastIndex,拖拽,startY,SlickItem,slicksort,alwaysList,event
来源： https://www.cnblogs.com/bella99/p/15844149.html