前言

最近的一个项目接触了到了Vue.Draggable这个组件。不过我们的需求和Vue.Draggable这个组件所支持的有些出入。这个拖拽组件属于插入的模式。一但拖拽的是相间的元素（中间隔着几个元素），那么拖拽元素就会占据被拖拽元素的位置，而后续元素位置逐级向下减一。

如下图：

c拖拽到a的位置，表现为c插入到a的前面。所以变为了cab。

需求

实现交换而非插入及上图要变成（cba）

实现方式

想要阻止它插入是不可能，我们只能等它插入结束后对我们想要的元素进行操作。比如拿到头和尾部两个索引。交换他们在数组中的位置。需要注意的是，因为拖拽时已经改变数组里面元素的位置了，因此我们需要在拖拽前copy一个和原数组一样的数组。

实现步骤

1、 选择一个适合自己的方法，需要能够获得开始索引和结束索引
end，sort，update都可以

2、深拷贝

copyList(){
   this.copyList=this.list.slice(0)
}

3、通过索引来操作copyList数组位置

const item=this.copyList[oldIndex]
this.copyList.splice(oldIndex, 1, this.copyList[newIndex]);
this.copyList.splice(newIndex, 1, item);

4、将copyList赋值给list,并在结尾处获得新的拷贝的copyList

this.list=this.copyList
this.copyList = this.list.slice(0);

全部代码

import draggable from "@/vuedraggable";
let id = 1;
export default {
  name: "simple",
  display: "Simple",
  order: 0,
  components: {
    draggable,
  },
  data() {
    return {
      enabled: true,
      list: [{ name: "a" }, { name: "b" }, { name: "c" }],
      dragging: false,
      index: 0,
      copyList: [],
    };
  },
  computed: {
    draggingInfo() {
      return this.dragging ? "under drag" : "";
    },
  },
  created() {
    this.copyList = this.list.slice(0);
  },
  methods: {
    add: function () {
      this.list.push({ name: "Juan " + id, id: id++ });
    },
    replace: function () {
      this.list = [{ name: "Edgard", id: id++ }];
    },
    end({ oldIndex, newIndex }) {
      const item = this.copyList[oldIndex];
      this.copyList.splice(oldIndex, 1, this.copyList[newIndex]);
      this.copyList.splice(newIndex, 1, item);
      this.list = this.copyList;
      this.copyList = this.list.slice(0);
    },
  }
};

<draggable
        :list="list"
        :disabled="!enabled"
        class="list-group"
        ghost-class="ghost"
        :move="checkMove"
        @end="end"
        @sort="sort"
        @update="update"
        @start="start"
      >
  <div class="list-group-item" v-for="element in list" :key="element.name">{{ element.name }}</div>
</draggable>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS的webpack如何配置和应用？

  本篇文章给大家带来了关于javascript的相关知识，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，下面一起来看一下JavaScript webpack5配置及使用基本介绍，希望对大家有帮助。

• 怎样用js实现判断密码的强弱效果?

  怎样用js实现判断密码的强弱效果?我们在注册账号的时候，为了提高账号的安全性，很多注册业务都会设计密码的强弱显示，那么这一效果是怎样实现的呢？下面我们一起来看看。

• JavaScript用canvas画画的操作是什么

  这篇文章主要为大家介绍了JavaScript canvas 实现用代码画画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• JavaScript错误捕获怎样理解和使用？一文带你看懂

  这篇文章主要是介绍JavaScript错误捕获的内容，下文有介绍基本使用与逻辑、JavaScript错误捕获特性、错误对象等等内容，对大家学习和理解JavaScript错误捕获有一定的帮助，那么接下来就跟随小编来学习一下吧。

• 用swiper制作卡片轮播效果的代码是什么

  这篇文章主要为大家详细介绍了vue3.x使用swiper实现卡片轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下