vue3拖拽排序使用Sortable,获取拖拽排序之后的数据

1.安装Sortable

npm install sortablejs

2.导入

import Sortable from 'sortablejs'

3.使用

// html
 <div id="example" class="list-group">
    <template v-for="(element, index) in 6" :key="index">
        <div>item{{index + 1}}</div>
    </template>
  </div>

// js

// dom获取节点
 const el = document.getElementById('example')

const sortableHtml = new Sortable(el, {
    animation: 150,
    // 拖拽时预览图样式
    ghostClass: 'blue-background-class',
    
    // 具体配置见http://www.sortablejs.com/options.html
  })

Sortable.js中文网|配置Sortable相关配置:Sortable.js中文网|配置

vue3拖拽使用Sortable,获取拖拽之后的数据,Sortable拖拽结束之后获取的数据是没有改变的

 通过绑定onEnd回调方法,获取返回的evt对象,对象中存在oldIndex及newIndex参数,虽然拖拽之后获取的数据是没有改变的,而且此时更改绑定的数据会出现页面拖拽排序之后的序列出现错乱,所以我们可以在页面加载时深拷贝原始数据

onEnd方法返回的index参数是更改之后的,即index参数是实时更新的,所以我们可以通过index来对数据进行更改

const newFormTable = ref<object[]>([])
onMounted(() => {
  // 深拷贝数据
  newFormTable.value = JSON.parse(JSON.stringify(formTable。vallue))
  const el = document.getElementById('example')
  const sortableHtml = new Sortable(el, {
    animation: 150,
    // 拖拽时预览图样式
    ghostClass: 'blue-background-class',
    // 拖拽结束
    onEnd: (evt) => {
      // 通过index更改数据,获取拖拽排序之后的数据
      const changeData = newFormTable.value.splice(evt.oldIndex || 0, 1)
      newFormTable.value.splice(evt.newIndex || 0, 0, changeData[0])
    }
  })
})

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值