博客

jQWidgets jqxSortable滚动属性

  • Post category:jquery

jQWidgets是一个功能强大的JavaScript框架，支持多种UI组件和效果。其中的jqxSortable插件提供了一个动态的、可拖拽排序的列表，通过设置滚动属性，可以使得列表在拖拽时自动滚动，这为用户提供了更好的交互体验。

滚动属性的设置

在使用jqxSortable插件时，可以通过设置以下滚动属性来控制列表的滚动行为：

  • scrollSensitivity：滚动的灵敏度，即鼠标移动到列表边缘后自动开始滚动的距离，默认值为20。可以设置为更大的值来让鼠标必须靠近边缘时才会滚动，或设置为更小的值来让列表更容易滚动。
  • scrollSpeed：滚动的速度，即列表滚动的距离，默认值为20。可以设置为更大或更小的值来改变滚动的速度。
  • scrollDelay：滚动的延迟，即鼠标停止移动后列表继续滚动的时间。默认值为100，可以设置为更大或更小的值来改变滚动的延迟时间。

这些属性可以通过以下代码进行设置：

$("#sortable").jqxSortable({
    scrollSensitivity: 40,
    scrollSpeed: 10,
    scrollDelay: 200
});

滚动属性的应用

可以在以下两个示例中看到如何使用滚动属性。

示例1：对话框中的可排序列表

在这个示例中，我们在对话框中创建了一个可排序的列表。在列表拖拽时，如果鼠标移动到列表边缘，列表会自动滚动。以下是完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sortable Demo</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
    <script src="https://jqwidgets.com/public/jqwidgets/jquery-1.12.4.min.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxsortable.js"></script>
    <style>
        #sortable-dialog {
            display: none;
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            border: 1px solid #ccc;
            height: 150px;
            overflow: auto;
        }
        li {
            display: block;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #ccc;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <button id="show-dialog-btn">Show Dialog</button>
    <div id="sortable-dialog">
        <ul id="sortable-list">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
            <li>Item 10</li>
        </ul>
    </div>
    <script>
        $(document).ready(function () {
            var dialog = $("#sortable-dialog").jqxDialog({
                width: 400,
                height: 300,
                autoOpen: false
            });

            $("#show-dialog-btn").on("click", function () {
                dialog.jqxDialog("open");
            });

            $("#sortable-list").jqxSortable({
                scrollSensitivity: 40,
                scrollSpeed: 10,
                scrollDelay: 200
            });
        });
    </script>
</body>
</html>

在这个示例中，我们首先创建了一个对话框，并添加了一个列表。然后将这个列表转化成可排序的列表，并设置滚动属性。当我们在列表中拖拽时，如果鼠标移动到列表边缘，列表会自动滚动。

示例2：可排序树列表

在这个示例中，我们创建了一个包含多级树状结构的可排序列表。在列表拖拽时，如果鼠标移动到列表边缘，列表会自动滚动。以下是完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sortable Demo</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
    <script src="https://jqwidgets.com/public/jqwidgets/jquery-1.12.4.min.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxtree.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqxsortable.js"></script>
    <style>
        #sortable-tree {
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="sortable-tree"></div>
    <script>
        $(document).ready(function () {
            // Create the tree data source
            var source = [
                {
                    label: "Item 1",
                    expanded: true,
                    items: [
                        { label: "Sub Item 1" },
                        { label: "Sub Item 2" },
                        { label: "Sub Item 3" }
                    ]
                },
                {
                    label: "Item 2",
                    expanded: true,
                    items: [
                        { label: "Sub Item 1" },
                        { label: "Sub Item 2" },
                        { label: "Sub Item 3" }
                    ]
                },
                {
                    label: "Item 3",
                    expanded: true,
                    items: [
                        { label: "Sub Item 1" },
                        { label: "Sub Item 2" },
                        { label: "Sub Item 3" }
                    ]
                }
            ];

            // Create the tree
            var tree = $("#sortable-tree").jqxTree({
                source: source,
                sortable: true,
                scrollSensitivity: 40,
                scrollSpeed: 10,
                scrollDelay: 200
            });

            // Add a button to collapse all tree items
            var collapseButton = $("<button>").text("Collapse All");
            collapseButton.on("click", function () {
                tree.jqxTree("collapseAll");
            });
            $("#sortable-tree").append(collapseButton);
        });
    </script>
</body>
</html>

在这个示例中，我们首先创建了一个包含多级树状结构的数据源，并将其绑定到一个树组件上。然后将这个树列表组件转化成可排序的，并设置滚动属性。当我们在列表中拖拽时，如果鼠标移动到列表边缘，列表会自动滚动。此外，我们还添加了一个按钮，用于折叠树的所有节点。

Tags: