vue拖拽列表----vuedraggable组件

RAY_CHEN.

已于 2022-03-30 16:05:20 修改

阅读量484

点赞数 1

于 2021-08-09 16:27:08 首次发布

本文链接：https://blog.csdn.net/weixin_44707050/article/details/119540814

版权

Vue vuedraggable 拖拽排序列表数据驱动

关键词由CSDN通过智能技术生成

实现效果：

原列表：

拖拽后列表：

实现过程：

1.引入

npm i -S vuedraggable

2. 页面


<template>
  <div>
 <vuedraggable class="wrapper" v-model="list">
      <transition-group>
        <div v-for="item in list" :key="item.projectid" class="item">
          <p>{{item.name}}</p>
        </div>
      </transition-group>
    </vuedraggable>
  </div>
</template>
<script>
import vuedraggable from "vuedraggable";
export default {
  components: { vuedraggable },
  props: {},
  data() {
    return {
    
      list: [
        {
          name: "体型",
          projectid: 1,
        },
        {
          name: "屈臂悬垂",
          projectid: 2,
        },
        {
          name: "引体向上",
          projectid: 3,
        },
      ],
     
    };
  },
  updated() {
    console.log(this.list);
  
  },

页面引入组件，使用组件即可；

如果是简单拖拽，使用html5的draggable；

如果是复杂的数据驱动，使用vuedraggable;

npm地址：vuedraggable - npmdraggable component for vue. Latest version: 2.24.3, last published: a year ago. Start using vuedraggable in your project by running `npm i vuedraggable`. There are 2296 other projects in the npm registry using vuedraggable.https://www.npmjs.com/package/vuedraggable