jquery实现的鼠标拖动排序Li或Table

这里是一份完整的攻略来讲解如何使用jQuery实现鼠标拖动排序li或table，并提供了两个示例说明。

第1步：引入jQuery库文件

在文档的head标签中引入jQuery库文件。

<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

第2步：编写HTML结构

在HTML中，您可以在ul或table元素内部创建带有data-index属性的li或tr元素。data-index属性的值应该是唯一的，它将在排序时被使用。

示例1：ul和li排序

HTML结构：

<ul id="sortable">
    <li data-index="1">Item 1</li>
    <li data-index="2">Item 2</li>
    <li data-index="3">Item 3</li>
    <li data-index="4">Item 4</li>
    <li data-index="5">Item 5</li>
</ul>

示例2：table和tr排序

HTML结构：

<table id="sortable">
    <tbody>
        <tr data-index="1">
            <td>Apple</td>
            <td>1</td>
        </tr>
        <tr data-index="2">
            <td>Orange</td>
            <td>2</td>
        </tr>
        <tr data-index="3">
            <td>Banana</td>
            <td>3</td>
        </tr>
  </tbody>
</table>

第3步：编写JavaScript代码

在JavaScript中，我们将使用jQuery中的sortable方法来实现拖动排序。首先，我们需要在document.ready()函数中选择ul或table元素，然后调用sortable()方法并传入一些选项。

$(document).ready(function() {
    $("#sortable").sortable({
        cursor: "move",
        opacity: 0.6,
        revert: true,
        update: function(event, ui) {
            // 这里可以编写拖动排序后的回调函数
        }
    });
});

在上面的代码中，我们设置了一些选项，例如cursor，opacity和revert，它们用于改变拖动排序的外观和行为。其中，update回调函数在每次排序完成后会被调用，您可以在此处编写您的逻辑代码。

第4步：完成

现在，您已经可以使用jQuery实现拖动排序了！测试一下吧！

示例代码演示：https://codepen.io/pen/?template=mdPNVZY

示例1：`ul`和`li`排序

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sortable List With jQuery</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
    #sortable {
        width: 200px;
        margin: 0 auto;
        padding: 0;
    }
    #sortable li {
        margin: 5px 0;
        background-color: #EEE;
        padding: 5px;
        cursor: move;
    }
    </style>
    <script>
    $(document).ready(function() {
        $("#sortable").sortable({
            cursor: "move",
            opacity: 0.6,
            revert: true,
            update: function(event, ui) {
                alert("Sorted!");
            }
        });
    });
    </script>
</head>
<body>
    <h1>Sortable List With jQuery</h1>
    <ul id="sortable">
        <li data-index="1">Item 1</li>
        <li data-index="2">Item 2</li>
        <li data-index="3">Item 3</li>
        <li data-index="4">Item 4</li>
        <li data-index="5">Item 5</li>
    </ul>
</body>
</html>

示例2：`table`和`tr`排序

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sortable Table With jQuery</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
    #sortable {
        width: 300px;
        margin: 0 auto;
        border-collapse: collapse;
    }
    #sortable th,
    #sortable td {
        border: 1px solid #CCC;
        padding: 10px;
    }
    </style>
    <script>
    $(document).ready(function() {
        $("#sortable").sortable({
            cursor: "move",
            opacity: 0.6,
            revert: true,
            update: function(event, ui) {
                alert("Sorted!");
            }
        });
    });
    </script>
</head>
<body>
    <h1>Sortable Table With jQuery</h1>
    <table id="sortable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            <tr data-index="1">
                <td>Apple</td>
                <td>1</td>
            </tr>
            <tr data-index="2">
                <td>Orange</td>
                <td>2</td>
            </tr>
            <tr data-index="3">
                <td>Banana</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现的鼠标拖动排序Li或Table - Python技术站