jQWidgets jqxSortable beforeStop 事件

jqxSortable是jQWidgets中的一个插件，用于实现可排序的列表。beforeStop事件是该插件中的一个事件，触发时会在正在拖动的item放置前被触发，允许开发人员通过返回值控制item是否能够被放置，以及放置的位置。

使用方法

在初始化jQWidgets jqxSortable时，可以传入beforeStop事件的回调函数，例如：

$('#sortable').jqxSortable({
    beforeStop: function (event) {
        // ...
    }
});

在回调函数中可以使用event参数来获取当前拖动的item以及目标位置等信息，例如：

beforeStop: function (event) {
    var item = $(event.args.item);
    var target = $(event.args.target);
    var position = event.args.position;
    var sibling = $(event.args.sibling);

    // ...
}

在回调函数中，可以根据需要返回一个boolean值告诉插件是否允许item被放置。如果返回false，则item将不会被放置；如果返回true，则可以根据其他逻辑判断放置的位置。

beforeStop: function (event) {
    var item = $(event.args.item);
    var target = $(event.args.target);

    if (target.hasClass('no-drop')) {
        return false;
    }
    else {
        return true;
    }
}

参数说明

• event: 事件对象，包含以下属性：

  • args: 对象，包含以下属性：
    • item: 拖动的item的jQuery对象
    • position: 放置的位置，取值为"before"或"after"
    • sibling: 放置的目标项的前/后一项的jQuery对象
    • target: 放置的目标项的jQuery对象

示例代码

$('#sortable').jqxSortable({
    placeHolderTemplate: $('<div class="jqx-sortable-placeholder"></div>'),
    beforeStop: function (event) {
        var item = $(event.args.item);
        var target = $(event.args.target);

        if (target.hasClass('no-drop')) {
            return false;
        }
        else {
            if (event.args.position === "before") {
                item.insertBefore(target);
            }
            else {
                item.insertAfter(target);
            }
            return true;
        }
    }
});

返回结果说明

beforeStop事件的回调函数需要返回一个boolean值，表示是否允许item被放置。如果返回false，则item将不会被放置；如果返回true，则可以根据其他逻辑判断放置的位置。