在前端开发中，权限选择是非常常见的需求。而在权限选择的过程中，往往会需要对权限进行排序。本文将介绍如何使用JQuery实现一个带有排序功能的权限选择实例。
实现思路
本实例主要分为两部分：权限选择和权限排序。当用户选择某个权限时，我们将其加入到已选择权限的列表中；当用户需要对已选择的权限进行排序时，则可以通过拖拽方式实现。
具体实现思路如下：
- 使用HTML、CSS构建界面，包括两个区域：待选择区域和已选择区域。
- 使用JQuery实现点击事件，将选中的权限添加到已选择区域。
- 使用JQuery UI库中的sortable方法，实现已选择权限的排序功能。
- 最后需要将已排序的权限提交到服务器端。
接下来我们将详细介绍每一个步骤的实现方法。
实现步骤
1. 构建界面
首先，我们需要构建界面。界面分为两个区域：待选择区域和已选择区域。其中，待选择区域包含一个搜索框和一个列表，用于展示可供选择的权限信息；已选择区域包含一个列表，用于展示用户已选择的权限。
-- -------------------- ---- -------
-----
--------------
------ ----------- ----------- -------------------
--- -----------------
---- ------- ---
-----
------
-----
--------------
--- -------------------------
---- ------- ---
-----
------2. 添加选中权限
当用户在待选择区域中选中一个权限时，我们需要将其添加到已选择区域的列表中。这一过程可以通过JQuery的click()方法实现。
$('#permissions').on('click', 'li', function() {
var permission = $(this).text();
$('#selectedPermissions').append('<li>' + permission + '</li>');
});3. 实现排序功能
当用户需要对已选择的权限进行排序时，我们需要使用JQuery UI库中的sortable方法。首先，需要引入JQuery UI库：
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
然后，在页面加载完成后，对已选择权限列表应用sortable方法：
$(document).ready(function() {
$('#selectedPermissions').sortable();
});4. 提交数据
最后，我们需要将用户已排序的权限提交到服务器端。这一过程可以通过JQuery的get()或post()方法实现。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
-------------------
----- ----------------
----- ---------------- -------------------------------------------------------------
-------
-- -
---------------- -----
-------- --
-
-- -
------- ----
------- --------
-
--------
-------
------
-----
--------------
------ ----------- ----------- -------------------
--- -----------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
-------------
-----
------
-----
--------------
--- -------------------------
-----
------
------- -----------------------------------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------