jQuery ui sortable无法达到beforeStop事件

Question

我使用jQuery ui sortable小部件创建了具有可排序行的表，一切都很好，直到需要更改表中的某些内容为止。

• 禁用表列，取消选中输入复选框
• 禁用表行，取消选中另一个输入复选框

当我取消选中那些输入，并开始拖放表行时，突然该行“卡住了”（就像没有释放鼠标按钮一样），并从可排序的事件中验证了这些事件，我发现从没到达过beforeStop事件。 我签出的事件是：开始，激活，更改，beforeStop，更新，停用和退出。 要做到这一点有些棘手，有时会发生在您开始快速拖放或首先停用一列，然后是一行，然后是拖放操作时。

我还具有一些对索引进行排序的函数，并且一个函数将禁用的行放置在表的末尾（堆栈溢出迫使我放置一些代码，但所有这些都摆在摆弄的位置）：

function createSortable() {
    $("#config_body").sortable({
        items: 'tr:not(:first)',
        update: function (event, ui) {
    },
    stop: function(event, ui){
        setTimeout(
            function(){
              reorder_rows();
        },
        200
      );
    }
  });
}

这是小提琴： https : //jsfiddle.net/hedka77/8uwmm2vp/4/

Answer 1

以防万一有人遇到了这个问题，我认为解决方案是添加一个表脚，并且每当停用某行时，您需要先停用可排序的，将停用的行发送到表脚，然后再次激活可排序的。 这是工作解决方案https://jsfiddle.net/hedka77/8uwmm2vp/

$(document).on("click", ".myClassCheckboxes", function (e) {

    $("#config_body").sortable("disable");

    var this_id_etapa = $(this).attr("id").split("_")[1];

    if ($(this).is(":checked")) {

      $(".cantDias").each(function () {
        var idEtapa = $(this).attr("name").split("_")[1];
        if (this_id_etapa == idEtapa) {
          $(this).prop("disabled", false);
          $(this).val("");

          //here you send back the row to the table body
          var parent = $(this).parent("td").parent("tr");
          parent.appendTo($("#config_body"));
        }
      });

    } else {

      $(".cantDias").each(function () {
        var idEtapa = $(this).attr("name").split("_")[1];
        if (this_id_etapa == idEtapa) {
          $(this).prop("disabled", true);
          $(this).val("");
        }
      });

      //And here we move the row to the table foot
      var parent = $(this).parent("td").parent("tr");
      parent.appendTo($("#config_foot"));
    }

    reorder_rows(); //this function enums the rows (1...n)
    $("#config_body").sortable("enable");
    updateSortable(); //refresh sortable positions
});