标签：vue lastIndex 拖拽 startY SlickItem slicksort alwaysList event

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。