jQuery ui sortable无法访问beforeStop事件

Question

我使用jQuery ui可排序小部件创建了一个带有可排序行的表，一切都很好，直到我需要更改桌面上的某些内容。

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

当我取消选中这些输入并开始拖放表行时，突然该行被“卡住”（就像没有释放鼠标按钮一样）并验证可排序的事件我发现从未到达过beforeStop事件。我检查过的事件包括：启动，激活，更改，之前停止，更新，停用和退出。达到此目的有点棘手，有时会在您开始快速拖放或首次停用列，然后是行然后拖放时发生。

我也有一些函数可以对索引进行排序，一个函数将禁用的行放到表的末尾（Stack Overflow强制我输入一些代码，但所有这些都是在小提琴上）：

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
});