vue 关于列表拖拽排序、draggable

最新推荐文章于 2023-07-08 11:03:01 发布

皮卡丘是个程序猿

最新推荐文章于 2023-07-08 11:03:01 发布

阅读量154

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42530606/article/details/129087690

版权

本文介绍了如何在Vue项目中通过npm安装vuedraggable插件来实现元素的拖放功能。文章提供了详细的步骤，包括安装、导入组件、数据绑定以及事件监听，使得用户可以轻松创建流畅的拖放体验。示例代码展示了如何配置拖放动画和处理拖放过程中的各种事件。

摘要由CSDN通过智能技术生成

第一步
1、安装draggable插件

npm i vuedraggable --save

第二步
直接复制代码即可应用，纵享丝滑搬流畅


<template>
  <div>
    <h2>纵享丝滑</h2>
    <div>{{ list }}</div>
    <section class="content">
      <!-- animation: 拖动动画时长(越小越快)-->
      <draggable
        v-model="list"
        animation="400"
        :move="move"
        @chang="change"
        @start="start"
        @end="end">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="list">
          {{ item }}
        </div>
      </draggable>
    </section>
  </div>
</template>
<script>
import draggable from 'vuedraggable';
export default {

  components: { draggable },
  data() {
    return {
      list: ['1', '2', '3', '4', '5', '6']
    };
  },

  methods: {
    change(event) {
      console.log('change');
    },
    start(event) {
      console.log('开始拖动');
    },
    move(event, orgin) {
      console.log('已改变位置');
    },
    end(event) {
      console.log('拖动结束');
    }
  }
};
</script>

<style scoped>
/* 根据您的需求更改样式即可 */
.content {
  width: 90%;
  height: 100%;
  overflow: scroll;
  padding: 20px;
}
.list {
  background: grey;
  padding: 20px;
  margin-bottom: 15px;
  cursor: move;
  border-radius: 10px;
}
</style>