jQWidgets jqxListBox dropAction属性

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

dropAction 属性

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

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

示例

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

示例 1

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

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

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

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

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

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

示例 2

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

<div id="jqListBox"></div>

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

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

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

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

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