页面内容排序插件jSort使用方法

下面就来详细讲解“页面内容排序插件jSort使用方法”的完整攻略：

一、什么是jSort？

jSort是一个轻量级的基于jQuery的页面内容排序插件，可以用来对页面中的内容、列表或元素进行排序。它具有简单易用、鼠标拖拽排序、支持键盘排序、支持自定义样式等优点，可以让用户轻松实现内容的排序功能。

二、使用jSort的步骤

1. 引入必要的文件

在使用jSort前，需要先引入它所需要的文件。在HTML文件中，需要引入jQuery和jSort插件的js文件，以及jSort的css文件，例如：

<!-- 引入jQuery库 -->
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入jSort插件的js文件 -->
<script src="js/jquery.jsort.js"></script> 
<!-- 引入jSort的css文件 -->
<link rel="stylesheet" href="css/jquery.jsort.css">

2. 编写HTML代码

在HTML中，需要编写需要排序的内容或元素，例如：

<ul class="j-sort">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

3. 调用jSort方法

在jQuery中，调用jSort方法即可对指定的内容或元素进行排序，例如：

$('.j-sort').jSort({
    selector: 'li'
});

4. 常用选项

jSort插件提供了一系列常用的选项，可以用来自定义排序的样式和行为，例如：

$('.j-sort').jSort({
    selector: 'li', // 被排序元素的选择器
    dragSelector: 'li', // 可拖拽元素的选择器
    nested: false, // 是否嵌套在其他元素中
    placeholder: 'j-sort-placeholder', // 占位符的class
    dragCssClass: 'j-sort-current', //可拖拽元素的class
    hoverCssClass: 'j-sort-hover',  // 鼠标悬停元素的class
    scrollSpeed: 15, // 拖拽时的滚动速度
    onChange: function () {}, // 排序完成后的回调函数
});

三、jSort的示例说明

示例1：对表格中的行进行排序

以下是一个table表格，其中包含多行数据。我们可以用jSort来对其中的行进行排序。

<table id="jSortTable" class="table">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody class="j-sort">
        <tr>
            <td>Tom</td>
            <td>22</td>
            <td>男</td>
        </tr>
        <tr>
            <td>Lily</td>
            <td>23</td>
            <td>女</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>24</td>
            <td>女</td>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>男</td>
        </tr>
    </tbody>
</table>

使用jSort的示例代码如下：

$('#jSortTable').find('tbody').jSort({
    selector: 'tr',
    dragCssClass: 'j-sort-current',
    hoverCssClass: 'j-sort-hover',
    onChange: function () {
        console.log('排序完成');
    }
});

示例2：对图片进行排序

以下是一个包含多张图片的div容器，我们可以用jSort来对其中的图片进行排序。

<div id="jSortPics" class="j-sort">
    <img src="img/1.jpg">
    <img src="img/2.jpg">
    <img src="img/3.jpg">
    <img src="img/4.jpg">
    <img src="img/5.jpg">
</div>