Reset Droppable Jquery

Question

I have a simple script that acts as a filemanager. The idea is to select a group of files/directories and drop them into another directory. However, if a directory is .ui-selected then it should not be droppable. The current script I have so far works as expected if I only select a group of files/directories once, but if I unselect and reselect a different group it no longer works.

Here is a fiddle that demonstrates the issue: https://jsfiddle.net/3gggh6bg/19/

Here is the js:

$(function() {
  $("#filemanager").selectable({
    filter: 'tr',
    start: function() {
      $("tr.ui-selected").each(function() {
        $(this).draggable('destroy');
      });
    },
    stop: function() {
      $("tr.ui-selected").draggable({
        helper: function() {
          var dom = [];

          dom.push("<div style=\"border:2px solid black;width:50px;height:20px;line-height:25px;\">",
            "<center>Files Selected: 1</center></div>");

          return $(dom.join(''));
        },

        revert: 'invalid',
        appendTo: 'parent',
        containment: '#filemanager',
        axis: 'y',
        cursor: '-moz-grabbing'
      });

      $(".droppable").not('.ui-selected').droppable({
        //accept: ".ui-selected",
        //activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
      });
    }
  });
});

Any help appreciated! Thanks!

Answer 1

There was an event that we were overlooking. I suspect I was investigating this using the same logic you were. That when the stop event was triggered, I should be able to find the unselected items or the selected items, and make some droppable while others would be left untouched.

This is the case initially, but the event we were failing to look at was the unselected event. This is triggered when the sate of an item is changed back from selected to unselected. Here is what I ended up with:

https://jsfiddle.net/Twisty/3gggh6bg/21/

jQuery

$(function() {
  $("#filemanager").selectable({
    filter: 'tr',
    start: function() {
      $("tr.ui-selected").each(function() {
        $(this).draggable('destroy');
      });
    },
    selected: function(e, ui) {
      console.log(e.target, " Selected triggered.");
      $(ui.selected).removeClass("droppable");
    },
    stop: function() {
      console.log("Stop triggered.");
      $("tr.ui-droppable").droppable("destroy");
      $("tr.ui-selected").draggable({
        helper: function() {
          var c = $("tr.ui-selected").length;
          var $h = $("<div>", {
            class: "ui-helper"
          }).css({
            display: "block",
            border: "2px solid black",
            width: "50px",
            height: "20px",
            "line-height": "25px"
          }).html("<center>Files Selected: " + c + "</center>");
          return $h;
        },
        revert: 'invalid',
        appendTo: 'parent',
        containment: '#filemanager',
        axis: 'y',
        cursor: '-moz-grabbing'
      });
      $("tr.droppable").droppable({
        hoverClass: "ui-state-active"
      });
    },
    unselected: function(e, ui) {
      console.log(e.target, "Unselect triggered.");
      $(ui.unselected).addClass("droppable");
      $("tr.droppable").droppable({
        hoverClass: "ui-state-active"
      });
    }
  });
});

This resets the droppable status from the selected items each time items are selected. If this is not working the way you expect, please comment and provide more info.