分类导航

程序笔记发布时间：2022-07-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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>