前言
在前端开发中，常常需要使用到列表或表格等控件。当列表或表格中的项需要进行排序时，拖拽排序功能是非常常见的需求。而使用 Material Design 框架的 RecyclerView 控件能够方便地实现拖拽排序功能，本文将介绍如何使用 RecyclerView 实现拖拽排序功能，并提供示例代码以供参考。
准备工作
在使用 RecyclerView 实现拖拽排序功能前，我们需要做一些准备工作。
- 引入 Material Design 组件库
首先需要引入 Material Design 组件库，可以通过以下代码完成：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
- 引入 RecyclerView 控件
接着需要引入 RecyclerView 控件，可以通过以下代码完成：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
实现拖拽排序功能
下面是使用 RecyclerView 实现拖拽排序功能的具体方法：
- 准备数据
首先需要准备好需要排序的数据，数据可以从后端获取，也可以使用前端模拟数据。
- 渲染列表
使用 RecyclerView 渲染列表，可以通过以下代码完成：
-- -------------------- ---- -------
---- ------------------
---------------
--- ----------------------
--- -----------------------
----- ------------------------------------------- --------
-----
--- -----------------------
----- ------------------------------------------- --------
-----
--- -----------------------
----- ------------------------------------------- --------
-----
-----
------- 开启拖拽功能
使用 jQuery UI 的 sortable 组件开启列表拖拽功能，可以通过以下代码完成：
$(function() {
$(".sortable-list").sortable({
axis: 'y',
});
});- 监听排序事件
在列表项拖拽完成后，需要将排序后的数据提交到后端进行处理。可以通过以下代码监听排序事件：
-- -------------------- ---- -------
------------ -
------------------------------
----- ----
----- --------------- --- -
--- ----- - ---
----------------- -------------------- -
---------------------------
---
-- --------
--------
------- -------
---- --------
----- - ------ ----- --
---
-
---
---总结
本文介绍了如何使用 Material Design 的 RecyclerView 实现拖拽排序功能，并提供了相应的示例代码。当需要实现列表项拖拽排序功能时，可以采用该方法，既简单又方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e2cd848841e9894ab409f