jQWidgets jqxSortable out 事件

jQuery Widgets (jQWidgets) 是一套用来增强 Web 应用程序用户交互体验的工具库。其中，jqxSortable 插件则专门用来实现可排序的拖放功能。当某个拖拽对象被放置到可接收的容器中时，jqxSortable 会触发 out 事件。

out 事件

当一个拖动的对象从可排序容器上移除时，会触发 out 事件。此时，可以执行某些操作进行处理。给定以下示例：

$("#sortable").jqxSortable({
    connectWith: "#list1, #list2",
    placeholder: "sortable-placeholder",
    opacity: 0.6,
    revert: true,
    dropAction: "drop",
    out: function (event) {
        $("#eventlog").jqxPanel('prepend', '<div>Sortable item is removed from ' + event.args.target.id + '</div>');
    }
});

在这个示例中，我们使用了 out 事件。每当可排序的项从容器上移开时，都会在一个 #eventlog 区域显示“Sortable item is removed from” + 事件目标的 ID。

示例1:

下面我们假设一个情境：你需要在‘拖拽-放置列表’中实现一个操作。你期望在用户从列表1中取走一个项目时，提供一个弹出对话框，以确保用户真的想要将该项目移动到另一个列表，请问，你该如何实现？

• 答案

$("#sortable").jqxSortable({
    connectWith: "#list1, #list2",
    dropAction: "drop",
    out: function (event) {
        if(event.args.source.id == "list1") {
            if (confirm('Are you sure you want to remove this item?')) {
                return true;
            } else {
                $("#sortable").jqxSortable('cancel');
            }
        }
    }
});

在这个示例中，我们还是使用了 out 事件。但是，我们对其进行了一些修改。现在，如果被拖动的项目来自列表1，out 事件会触发一个 JavaScript 对话框，询问用户是否真的想要移动该项目。如果用户点击“OK”，则关闭对话框并继续允许移动该项目。否则，对话框会关闭并且将该项目留在列表中。

示例2：

假设你现在有一个可排序表格，其中 Email 列中的所有单元格都包含表示电子邮件地址的字符串。你期望在用户拖动某个单元格但从未放下时，该单元格会变成斜体，表示未完成。怎么实现？

• 答案：

$("#sortable").jqxSortable({
    dropAction: "drop",
    out: function (event) {
        $(event.args.element).css("font-style", "italic");
    }
});

在这个示例中，我们同样使用了 out 事件。但是，我们希望通过改变重排项目的样式来实现另一种目标。我们在函数中使用 args.element 获取到了当前被拖拽的项的 jQuery 对象，并设置了它的样式为斜体。