博客

jQWidgets jqxListBox dragEnd属性

  • Post category:jquery

jqxListBox 是 jQWidgets 提供的一种列表框控件，用于在 Web 应用程序中创建列表。dragEnd 属性在拖动 jqxListBox 控件中的项并释放鼠标按钮时触发。以下是 jqxListBox 的 dragEnd 属性的详细说明：

dragEnd 属性

dragEnd 属性在拖动 jqxListBox 控件中的项并释放鼠标按钮时触发。该属性可以使用 on() 方法进行监听。

// 监听 jqxListBox 控件的 dragEnd 事件
$("#jqxListBox").on("dragEnd", function (event) {
    // 处理 dragEnd 事件
});

示例

以下是两个示例，演示如何使用 dragEnd 属性监听 jqxListBox 控件中的项的拖动事件。

示例 1

在此示例中，我们创建了一个 jqxListBox 控件，并使用 source 属性设置了列表框的数据源。我们还使用 dragEnd 属性监听了 jqxListBox 控件中的项的拖动事件，并将拖动后的项的值显示在页面上。

<div id="jqxListBox"></div>
<div id="draggedItem"></div>

<script>
    $(document).ready(function () {
        // 设置列表框数据源
        var source = [
            "Item 1",
            "Item 2",
            "Item 3",
            // ...
        ];

        // 创建 jqxListBox 控件
        $("#jqxListBox").jqxListBox({
            source: source
        });

        // 监听 jqxListBox 控件的 dragEnd 事件
        $("#jqxListBox").on("dragEnd", function (event) {
            // 获取拖动后的项的值
            var draggedItem = event.args.label;

            // 将拖动后的项的值显示在页面上
            $("#draggedItem").text("Dragged Item: " + draggedItem);
        });
    });
</script>

示例 2

在此示例中，我们创建了一个 jqxListBox 控件，并使用 source 属性设置了列表框的数据源。我们还使用 dragEnd 属性监听了 jqxListBox 控件中的项的拖动事件，并将拖动后的项的值显示在控制台上。

<div id="jqxListBox"></div>

<script>
    $(document).ready(function () {
        // 设置列表框数据源
        var source = [
            "Item 1",
            "Item 2",
            "Item 3",
            // ...
        ];

        // 创建 jqxListBox 控件
        $("#jqxListBox").jqxListBox({
            source: source
        });

        // 监听 jqxListBox 控件的 dragEnd 事件
        $("#jqxListBox").on("dragEnd", function (event) {
            // 获取拖动后的项的值
            var draggedItem = event.args.label;

            // 将拖动后的项的值显示在控制台上
            console.log("Dragged Item: " + draggedItem);
        });
    });
</script>

以上是 jqxListBox 的 dragEnd 属性的详细说明，以及两个示例说明。

Tags: