vue.draggable拖拽功能

最新推荐文章于 2025-10-24 09:47:11 发布

原创最新推荐文章于 2025-10-24 09:47:11 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

79 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装、配置并使用cpnpmi-Svuedraggable拖拽组件，包括安装步骤、组件注册、样式设定及事件监听等核心内容，并提供了代码示例与效果预览。

一、安装

cnpm i -S vuedraggable

二、引用与注册

<script>
import draggable from "vuedraggable";	//引入
export default {
  name: "",
  props: {},
  components: { draggable },		//注册组件
};
</script>
<style scoped>
        /*被拖拽对象的样式*/
        .item {
            padding: 6px;
            background-color: #fdfdfd;
            border: solid 1px #eee;
            margin-bottom: 10px;
            cursor: move;
        } 
        /*选中样式*/
        .chosen {
            border: solid 2px #3089dc !important;
        }
</style>

三、使用

注意：若要实现横向标签可以在 draggable标签中设置 style="display:flex"

<draggable v-model="myArray"  chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
     <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>