uni-app+sortable.js怎么实现拖拽排序？步骤分享

uni-app+sortable.js怎么实现拖拽排序？步骤分享

1. 了解Uni-app

Uni-app是一款跨平台的应用开发框架，可同时开发小程序、H5、App等多个平台，具有开发效率高、开发成本低的特点。

2. 了解sortable.js

sortable.js是一个JavaScript库，可实现拖拽排序的功能。它可以应用于列表、表格、甚至网格布局等多种场景。

3. 安装sortable.js

在Uni-app工程中，可以通过npm安装sortable.js。

npm install sortablejs --save

4. 引入sortable.js

在需要使用sortable.js的页面中引入sortable.js。

import Sortable from 'sortablejs'；

5. 使用sortable.js

定义一个列表（ul或ol），并给每个列表项（li）添加一个唯一的标识符（例如id）：

 <ul id="sortable">

     <li id="item1">Item 1</li>
     <li id="item2">Item 2</li>
     <li id="item3">Item 3</li>
 </ul>

在页面mounted（或onLoad）生命周期中创建sortable.js实例：

mounted () {

     const sortable = Sortable.create(document.getElementById('sortable'), {
         animation: 150
     });
}

此时，我们已经成功地使用sortable.js实现了一个简单的拖拽排序列表。

6. 排序事件的处理

为了检测排序事件，sortable.js提供了一组事件钩子（hooks）。这里我们介绍三个钩子函数：sort, update和end。

其中sort事件会在列表项排序改变时触发，update事件会在列表项修改完成后触发，end事件会在拖放结束时触发。

在对sortable.js实例进行初始化时，我们可以传递这些事件的回调函数，来执行一些指定的操作：

const sortable = Sortable.create(document.getElementById('sortable'), {

     animation: 150,
     onSort: function (e) {
         console.log('Sort triggered');
     },
    onUpdate: function (e) {
         console.log('Update triggered');
    },
    onEnd: function (e) {
         console.log('End triggered');
    }
})

7. 修改列表数据

通过监听update事件，我们可以获取到列表项排序发生变化后的全部数据，然后可以将其提交到服务器或本地存储中。

const sortable = Sortable.create(document.getElementById('sortable'), {

     animation: 150,
     onUpdate: function (e) {
         const items = sortable.toArray();
         console.log(items);
     }
})

至此，我们完成了uni-app+sortable.js实现拖拽排序的所有步骤。

总结

在本文中，我们介绍了如何使用uni-app和sortable.js实现拖拽排序的步骤。其中，我们了解了Uni-app和sortable.js的基本概念，安装和引入了sortable.js，使用sortable.js创建了一个简单的拖拽排序列表，并通过监听事件实现了拖拽排序的数据处理等操作。

对于要实现拖拽排序的应用，我们可以灵活运用这些技术和方法，在更加复杂和特殊的场景中实现拖拽排序的功能。