Angular UI 可排序 - 分组

Question

我四处寻找 "elegant" 方法来做到这一点。使用 Angular UI Sortable I currently have 3 columns, which essentially looks like this 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 但其他拖拽 n drop/sortable angular 库基本上都有相同的限制。

Answer 1

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

Angular UI 可排序 - 分组

Angular UI Sortable - Grouping

javascript

grouping

jquery-ui

jquery-ui-sortable

angularjs