如何在ui-sortable中手动触发“更新" [英] How to manually trigger 'update' in ui-sortable

问题描述

我正在使用一个可排序的UI，在每个项目中都有一个delete按钮.这是删除功能:

I'm using an UI sortable with in each item a delete button. Here is the delete function:

$('.delete_item').click(function(){
    $(this).closest('.grid_3_b').remove();
    initSortable();
    $(".sortable").sortable('refresh').trigger('update');
});

div获取已按照我的意愿被删除，但是没有update数据发送到PHP.因此，我的脚本不会保存订单和已删除的项目.

The div get's removed as I want to, but there is no update data sent to PHP.. So my script won't save the order and deleted item..

这是我的initSortable();函数:

function initSortable() {
    $( ".sortable" ).sortable({
        items: '.grid_3_b, .dropable',
        connectWith: ".sortable",
        placeholder: "placeholder",
        remove: function(event, ui) {
            if(!$('div', this).length) {
                $(this).next('.dropable').remove();
                $(this).remove();
            }
            initMenu();
        },
        receive: function(event, ui) {
            if( $(this).hasClass( "dropable" ) ) {
                if( $(this).hasClass( "gallery__item--active" ) ) {
                    $(this).before( "<div class=\"dropable gallery__item sortable\"></div>" );
                    $(this).after( "<div class=\"dropable gallery__item sortable\"></div>" );

                    initSortable();
                    $(".sortable").sortable('refresh').trigger('update');
                    initMenu();
                }
            }
        },
        update : function () {
            var neworder = new Array();
            $('.sortable').each(function() {
                var id  = $(this).attr("id");
                var pusharray = new Array();
                $('#' + id).children('div').each(function () {
                    var art = $(this).attr("data-art");
                    var pos = $(this).attr("data-pos");
                    pusharray.push( {data:{'art':art, 'pos':pos}} );
                });
                neworder.push({'id':id, 'articles':pusharray});
            });

            $.post("example.php",{'neworder': neworder},function(data){});
            initMenu();
        }
    }).disableSelection();
}

initSortable();

此外，remove函数通常在其为空时删除该列，但是在删除该列中的最新项时不起作用.这是因为未调用更新触发器吗?

Also, the remove function normally deletes a column when it's empty, but doesn't work when deleted the latest item in the column.. Is this because the update trigger isn't called?

推荐答案

用于在 jquery-ui sortable ，而不是在options对象中指定处理程序，而是需要在可排序的初始化之后绑定事件处理程序.

For manually triggering events in jquery-ui sortable, instead of specifying the handler in options object, you need to bind the event handler after sortable initialization.

例如，以下操作无效

$('ul').sortable({
  update: function () {
    console.log('update called');
  }
});
$('ul').trigger('sortupdate'); // doesn't work

以下作品

$('ul').sortable();
$('ul').on('sortupdate',function(){
   console.log('update called');
});
$('ul').trigger('sortupdate'); // logs update called.

演示

这篇关于如何在ui-sortable中手动触发“更新"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！