Angular UI 可排序 - 分组

Question

我到处寻找“优雅”的方式来做到这一点。使用 Angular UI Sortable 我目前有 3 列，基本上看起来像这样 codepen，只有 3 列而不是 2 列。查看 sortOptions：

function createOptions (listName) {
var _listName = listName;
var options = {
  placeholder: "app",
  connectWith: ".apps-container",
  activate: function() {
      console.log("list " + _listName + ": activate");
  },
  beforeStop: function() {
      console.log("list " + _listName + ": beforeStop");
  },
  change: function() {
      console.log("list " + _listName + ": change");
  },
  create: function() {
      console.log("list " + _listName + ": create");
  },
  deactivate: function() {
      console.log("list " + _listName + ": deactivate");
  },
  out: function() {
      console.log("list " + _listName + ": out");
  },
  over: function() {
      console.log("list " + _listName + ": over");
  },
  receive: function() {
      console.log("list " + _listName + ": receive");
  },
  remove: function() {
      console.log("list " + _listName + ": remove");
  },
  sort: function() {
      console.log("list " + _listName + ": sort");
  },
  start: function() {
      console.log("list " + _listName + ": start");
  },
  stop: function() {
      console.log("list " + _listName + ": stop");
  },
  update: function() {
      console.log("list " + _listName + ": update");
  }
};
return options;

}

鉴于这些可排序的事件，我不知道如何检测一张卡片是否被放在另一张卡片上。我很确定它只是不受支持...如果我能弄清楚如何检测到它，我可以处理 UI 更新，但在库的一部分中，卡片实际上会彼此远离。

在理想情况下，我认为我需要围绕添加到列表中的每张卡片创建动态子列表。这样你就可以直接进入一个内部列表，它看起来就像是在它周围有一些 UI 分组。这个codepen 某种是用vanilla jQuery sortable library做的，但最大的问题是所有容器都必须存在。

以前有人解决过这个问题吗？我不一定与 UI 可排序相关，但其他拖放/可排序角度库基本上都具有相同的限制。

Answer 1

暂时只使用子列表，据我所知不支持。