vuedraggable 实现拖动数据改变

最新推荐文章于 2024-08-20 09:21:23 发布

weixin_30740581

最新推荐文章于 2024-08-20 09:21:23 发布

阅读量3.4k

点赞数

文章标签： javascript 数据库 json ViewUI

原文链接：http://www.cnblogs.com/hpx2020/p/11401427.html

版权

本文介绍了如何利用vuedraggable组件在Vue.js应用中实现拖放功能，通过拖动来动态更新JSON数据，从而改变数据库中的信息。详细教程链接：https://www.cnblogs.com/hpx2020/p/11401427.html

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

  // 引入组件  import Draggable from 'vuedraggable'

// 使用组件 DragList 为自己封装好的组件  注意一定要使用vue的sync
<DragList :sortArr.sync="sortArr"></DragList>

// dragList组件
// :value 为绑定的传承 通过他来替换
<!--拖动排序列表-->
<template>
  <ul class="sort-ul">
    <Draggable  group="article" :value="sortArr" @input="handleListChange($event)">
      <li v-for="(item,index) in sortArr" :key="index">
        <h2>{
    {item.title}} <small>普通组</small></h2>
        <p>共4个字段，已配置3个字段，已额外添加3个字段。共4个字段，已额 </p>
      </li>
    </Draggable>
  </ul>
</template>

<script>