vue使用vuedraggable插件拖拽排序

杨小凹

已于 2022-06-09 17:24:35 修改

阅读量5.6k

点赞数 2

文章标签： vue.js javascript 前端

于 2022-05-22 23:55:43 首次发布

本文链接：https://blog.youkuaiyun.com/aiyang1214878408/article/details/124918995

版权

本文介绍了如何使用Vue.Draggable组件实现拖拽排序功能，特别是在构建一个类似计算器的应用中。通过设置不同的options属性，如group和put，可以控制元素的拖放行为。左侧区域用于选择和拖动按钮，右侧区域接收并处理拖入的元素，展示计算公式。文章提供了详细的代码示例，并附有源码下载链接。

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

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。所以一般要实现拖拽功能的时候我都会想到使用这个插件。

安装

    npm install vuedraggable

引入

    // 单个文件引入
    import draggable from "vuedraggable";
    
    // 注册组件
    components: {
   
      draggable
    },

基础用法

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



data() {
   
    return {
   
        // 在data中定义需要拖拽的数据
        myArray: [
            {
    people: 'cn', id: 1, name: '张三' },
            {
    people: 'cn', id: 2, name: '李四' },
            {
    people: 'cn', id: 3, name: '王五' },
            {
    people: 'cn', id: 4, name: '钟馗' }
        ]
    };
},
methods: {
   
    // 开始拖拽事件
    onStart() {
   
        // to do
    },
    // 拖拽结束事件
    onEnd() {
   
        // to do