javascript - 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 有点是用普通的 jQuery 可排序库来做的，但最大的问题是所有的容器都已经存在。

有人解决过这个问题吗？我不一定依赖于 UI Sortable，但其他拖放/可排序 Angular 库基本上都具有相同的限制。

Answer 1

现在只是打算使用子列表，据我所知，它不受支持。