重置 Droppable Jquery

Question

我有一个用作文件管理器的简单脚本。这个想法是选择一组文件/目录并将它们放到另一个目录中。但是，如果一个目录是 .ui 选择的，那么它不应该是可放置的。如果我只选择一组文件/目录一次，那么到目前为止我所拥有的当前脚本可以按预期工作，但是如果我取消选择并重新选择另一个组，它将不再有效。

这是一个演示问题的小提琴：https://jsfiddle.net/3gggh6bg/19/

这里是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",
      });
    }
  });
});

任何帮助表示赞赏！谢谢！

Answer 1

我们忽略了一个事件。我怀疑我正在使用与您相同的逻辑对此进行调查。当stop 事件被触发时，我应该能够找到未选中的项目或选中的项目，并使一些可放置，而另一些则保持不变。

最初是这种情况，但我们未能查看的事件是unselected 事件。当项目的状态从选中更改回未选中时会触发此事件。这是我最终得到的结果：

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

这会在每次选择项目时重置所选项目的droppable 状态。如果这不符合您的预期，请发表评论并提供更多信息。