在vue项目中使用vuedraggable,进行的简单代码示例拖拽

最新推荐文章于 2025-06-03 11:15:18 发布

原创最新推荐文章于 2025-06-03 11:15:18 发布 · 585 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在Vue项目中引入并使用vuedraggable组件进行元素的拖拽操作，包括安装依赖、导入组件、配置选项及监听拖拽事件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目中使用vuedraggable,进行的拖拽

1 npm install vuedraggable
2.import draggable from “vuedraggable”;
3.代码示例如下

<template>
  <div class="fluid container">
    <draggable
      class="list-group"
      tag="ul"
      v-model="list"
      v-bind="dragOptions"
      @start="start()"
      @end="end()"
    >
      <li class="list-group-item" v-for="item in list" :key="item.name">
        <span>{{item}}</span>
      </li>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "",
  components: {
    draggable
  },
  data() {
    return {
      list: [
        //list的顺序为拖拽后的顺序
        { name: "123" },
        { name: "456" },
        { name: "789" },
        { name: "111" },
        { name: "222" },
        { name: "333" }
      ],
      isDragging: {
        animation: 300, //拖拽动画
        disabled: false //是否禁用拖拽
      }
    };
  },
  created() {},
  methods: {
    start() {
      //拖拽开始
    },
    end() {
      //脱宅结束
    }
  },
  computed: {}
};
</script>

<style>
</style>