Angular UI Sortable - Grouping

Question

I've searched high and low for an "elegant" way to do this. Using Angular UI Sortable I currently have 3 columns, which essentially looks like this codepen, just with 3 columns instead of 2. Looking over the 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;

}

Given those sortable events, I don't see how I can detect if a card is being dropped on top of another one. I'm pretty sure its just not supported... I can handle the UI updates if I can figure out how to detect that, but part of the library the cards actually move away from each other.

In an ideal world I think I would need to create dynamic sub lists around every card thats added to the list. That way you could just drop into the an inner list, and it would appear like that grouped with some UI around it. This codepen sort of does it with the vanilla jQuery sortable library, but the big problem is that the all the containers already have to exist.

Anyone solve this before? I'm not necessarily tied to UI Sortable but the other drag n drop/sortable angular library's all essentially have the same limitation.

Answer 1

Just going to use sub lists for now, it's not supported as far as i can tell.