重置 Droppable Jquery

Question

我有一个用作文件管理器的简单脚本。思路是将select一组files/directories放到另一个目录下。但是，如果一个目录是 .ui-selected 那么它应该是不可删除的。如果我只 select 一组 files/directories 一次，我目前的脚本可以按预期工作，但如果我取消 select 并重新 select 一个不同的组，它就不再作品。

这里有一个 fiddle 演示了这个问题：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 状态。如果这不符合您的预期，请发表评论并提供更多信息。

重置 Droppable Jquery

Reset Droppable Jquery

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-droppable

jquery-ui-selectable