jQWidgets jqxSortable 完整参考

jQWidgets jqxSortable 是一个 JavaScript 库，用于创建可拖放列表和表格。本文将介绍 jQWidgets jqxSortable 库的使用方法和示例。

安装

jQWidgets jqxSortable 库可以通过以下方式进行安装：

1. 从 jQWidgets 官网 下载 jQWidgets 插件。
2. 将下载的文件引入到 HTML 页面中。

<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxsortable.js"></script>

使用方法

创建可排序列表

以下是创建可排序列表的示例代码。

<div id="sortableList">
    <div class="jqx-sortable-item">Item 1</div>
    <div class="jqx-sortable-item">Item 2</div>
    <div class="jqx-sortable-item">Item 3</div>
    <div class="jqx-sortable-item">Item 4</div>
    <div class="jqx-sortable-item">Item 5</div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#sortableList').jqxSortable({
            connectWith: '#sortableList',
            placeholder: 'sortable-placeholder',
            opacity: 0.6,
        });
    });
</script>

该示例创建了一个可排序列表，在每个元素上添加了 jqx-sortable-item CSS 类。使用 jqxSortable 函数对该列表进行初始化，并传递了一些选项：

• connectWith: 允许与其他具有指定选择器的列表连接。
• placeholder: 指定占位符元素的 CSS 类。
• opacity: 在拖放期间指定元素的不透明度。

创建可排序表格

以下是创建可排序表格的示例代码。

<table id="sortableTable">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
            <td>Row 1, Column 3</td>
        </tr>
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
            <td>Row 2, Column 3</td>
        </tr>
        <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
            <td>Row 3, Column 3</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
    $(document).ready(function() {
        $('#sortableTable tbody').jqxSortable({
            connectWith: '#sortableTable tbody',
            placeholder: 'sortable-placeholder',
            opacity: 0.6,
        });
    });
</script>

该示例创建了一个可排序表格，并在表格主体中调用了 jqxSortable 函数。与使用可排序列表的示例类似，我们还指定了一些选项。

选项

以下是可在 jQWidgets jqxSortable 库中使用的选项列表：

• connectWith: 允许与其他具有指定选择器的列表或表格连接。
• placeholder: 指定占位符元素的 CSS 类。
• opacity: 在拖放期间指定元素的不透明度。
• axis: 指定在哪个方向上进行拖放。有效值为 "x"、"y" 或 "xy"。
• cancel: 用于防止拖动某些元素。指定一个选择器来匹配不允许拖动的元素。

结论

本文介绍了 jQWidgets jqxSortable 库的使用方法和示例，为开发人员提供了创建可拖放列表和表格的灵活方法。如有问题或疑问，请参阅官方文档并联系开发人员。