vue拖拽插件vuedraggable

最新推荐文章于 2024-08-29 15:10:00 发布

程序媛-静儿

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签： vuedraggable

本文链接：https://blog.csdn.net/qq_36711388/article/details/89343918

版权

本文介绍了如何在Vue项目中使用vuedraggable插件进行拖拽操作，该插件基于SortableJS，提供了与sortable.js相同的配置选项。通过简单的安装和代码示例，展示了vuedraggable在实现拖拽改变树结构场景的应用。

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

最近有项目需要用到拖拽改变树结构，给大家推荐vue的插件库vuedraggable（gitHub:https://github.com/SortableJS/Vue.Draggable
），这个插件是基于sortable.js（gitHub:https://github.com/RubaXa/Sortable），所以这个options里面的配置，和sortable.js是一样的。

下面是一个简单的例子：

首先安装插件：npm install vuedraggable -S

使用具体代码片段：

<template>
  <div class="index-wrap">
    <div class="index-left">
      <div class="index-left-block lastest-news">
        <h2>拖动的块块</h2>
        <ul>
          <draggable v-model="newsList" @update="datadragEnd" :options = "{animation:500}">
            <transition-group>
                <li v-for="item in newsList" :key="item.id" class = "drag-item">
                  <div