jQWidgets jqxSortable 取消属性

jQWidgets是一个基于jQuery的UI组件库，其中包含了一个名为jqxSortable的排序组件。jqxSortable是通过拖拽和释放来初始化和拖拽一个元素集合的工具。

如果你想要取消一个元素的jqxSortable属性，你可以使用以下方法：

使用jQuery的removeAttr方法

$('#sortable').find('li').removeAttr('data-role');

上面的代码中，我们使用jQuery选择器找到一个id为sortable的元素，然后查找它内部所有的li元素，并从它们中删除data-role属性。

使用jqxSortable的destroy方法

$('#sortable').jqxSortable('destroy');

上面的代码中，我们使用jQuery的选择器找到一个id为sortable的元素，然后调用它的jqxSortable方法的destroy属性来取消它的排序属性。

下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cancel jqxSortables attributes</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/demos.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxcore.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxsortable.js"></script>
    <style type="text/css">
        /* Styles for demo purposes */
        .jqx-sortable li {
            padding: 10px;
            margin: 10px;
            background-color: #ccc;
            border: 1px solid #000;
            list-style-type: none;
            cursor: move;
        }
    </style>
</head>
<body>
    <ul id="sortable" class="jqx-sortable">
        <li data-role="item1">Item 1</li>
        <li data-role="item2">Item 2</li>
        <li data-role="item3">Item 3</li>
        <li data-role="item4">Item 4</li>
        <li data-role="item5">Item 5</li>
    </ul>

    <button id="cancel-sortable">Cancel sortable</button>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#sortable').jqxSortable({});

            $('#cancel-sortable').on('click', function(event) {
                event.preventDefault();
                $('#sortable').find('li').removeAttr('data-role');
            });
        });
    </script>
</body>
</html>

在上述示例中，我们创建了一个包含5个元素的jqxSortable组件，并用data-role属性标记了它们。接着，我们增加了一个“取消sortable”按钮来取消所有元素的jqxSortable属性，并且在点击按钮时，使用jQuery的removeAttr方法来移除所有元素的data-role属性。

希望这个攻略对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQWidgets jqxSortable 取消属性 - Python技术站