91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

js sortable能實現拖拽排序嗎

js
小樊
90
2024-10-23 00:48:06
欄目: 編程語言

是的,Sortable.js 可以實現拖拽排序。Sortable.js 是一個輕量級的 JavaScript 庫,用于實現拖拽排序列表。它非常靈活,支持多種排序模式,如垂直、水平、自定義排序等。要使用 Sortable.js,你需要在 HTML 中創建一個列表,并在 JavaScript 中初始化它。

以下是一個簡單的示例,展示了如何使用 Sortable.js 實現垂直拖拽排序:

  1. 首先,在 HTML 中創建一個列表:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable.js Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable.js/latest/Sortable.min.css">
</head>
<body>
    <ul id="sortableList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable.js/latest/Sortable.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
  1. 接下來,在 JavaScript 文件(如 script.js)中初始化 Sortable.js:
const sortableList = document.getElementById('sortableList');
const sortable = new Sortable(sortableList, {
    animation: 150,
    onUpdate: function (event) {
        console.log('Sorted items:', sortableList.children);
    }
});

在這個示例中,我們創建了一個垂直排序的列表,并在 onUpdate 事件中打印排序后的列表。你可以根據需要修改這個示例,以適應你的項目需求。更多關于 Sortable.js 的信息和示例,請參考官方文檔:https://sortablejs.github.io/Sortable/

0
中阳县| 永和县| 临夏县| 岚皋县| 寻乌县| 炎陵县| 宁安市| 溧水县| 临猗县| 南澳县| 红安县| 呼玛县| 云梦县| 泽普县| 永和县| 修水县| 大邑县| 安宁市| 班玛县| 手游| 青铜峡市| 灯塔市| 常熟市| 满洲里市| 丰镇市| 台北市| 阿克| 马龙县| 宜州市| 宁陵县| 探索| 潞西市| 张家界市| 泰来县| 蓬溪县| 湖口县| 永善县| 克什克腾旗| 株洲县| 彰化市| 通辽市|