jQuery ui sortable cannot reach beforeStop event

Question

I have created a table with sortable rows using the jQuery ui sortable widget and everything was fine until I had the need to change some things on my table.

Disable a table column unchecking an input checkbox
Disable a table row unchecking another input checkbox

When I uncheck those inputs, and start dragging and dropping the table rows, suddenly the row gets "stuck" (just like if the mouse button were not released) and verifying the events from sortable I figured out that the beforeStop event is never reached. The events I have checked out are: start, activate, change, beforeStop, update, deactivate and out. It's a little tricky to get to this, sometimes occur when you start to drag and drop quickly or when you first deactivate a column, then a row and then dragging and dropping.

I also have some functions to order indexes and one function puts the disabled row to the end of the table (Stack Overflow force me to put some code, but all of it it's on the fiddle):

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

Here is the fiddle: https://jsfiddle.net/hedka77/8uwmm2vp/4/

I've been playing with the fiddle for a little while now, but haven't been able to get to the bottom of the issue. However, I did notice two things: First, that the browser seems to hang just a bit -- little spinning circle -- just before the row gets stuck (not too helpful, I know). Second, and un-related, but if you click the box to disable an entire row, then the checkboxes on that row go inactive suggesting they are not valid choices. However, if you click on the checkbox for the column it will turn them back on (I don't think you intended for that behavior). — d'Noob
Yes, i have been reading about how browsers perform the jquery ui and testing with some of them (firefox, chrome, ie) it seems that in internet explorer (and edge) works perfectly normal. Yeah, im working on this behavior but I focused on the sortable problem. — hedka77
Hey @Coconut, i just made some modifications to the fiddle, and i believe that the solution is to add a table foot, and when you deactivate any row, you've to deactive the sortable plugin, send the deactivated row to the table foot and activate sortable again. I tried the original fiddle and I still got the problem, but with this one now is fixed: jsfiddle.net/hedka77/8uwmm2vp (tested on firefox) — hedka77
Finally I've finished updating my jquery ui version to the latest and the bug is gone. Either way thank you @hedka77 — Coconut

hedka77 hedka77 · Accepted Answer · 2018-08-29T16:27:35

Just in case someone got this problem, I believe the solution is to add a table foot and everytime a row is deactivated, you need to deactive sortable first, send the deactivated row to the table footer and then activate sortable again. Here is the working solution 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
});

jQuery ui sortable cannot reach beforeStop event

1 Answers