Bug: When dragging between lists, a shadow element is kept in the pulled list.

[pedroadame]

I want to have three lists, one, two, and central. You can rearrange items between lists but you cannot have more than 5 items or less than one in one and two. I used a put/pull function to handle this, but it doesn't work and I don't know what I'm doing wrong.

JSFiddle: http://jsbin.com/juwicom/4/edit?html,js,console,output
Steps to reproduce:

1. Drag One 2 and One 3 to the Two X list.
2. You cannot drag One 1 into Two X list because it is the last item of its list -- OK
3. You cannot drag Central 1 into Two X list because Two X list already contains 5 items. -- OK
4. Drag One 2 and One 3 again to the One 1 list.
5. Now, you cannot drag any more items to One X list or Two X list, including the Central 1 item.
6. In fact, if you drag One X or Two X to central list, you cannot redrag it to the original list.

This is the function I used in the pull option for groupone and grouptwo in the fiddle:

    pull: function (from, to) {
      return from.el.children.length > 1;
    },
    put: function(to) {
      return to.el.children.length < 5;
    }

Is my function wrong? @RubaXa

Update

7. Inspect foo list and you will see ghost elements with display: none of the elements you dragged before. Then, as there are 5 items, you cannot drag into the list.

You can see this in your own advanced usage of group fiddle: http://jsbin.com/rusuvot/edit?js,output Just inspect qux and drag to that list. Then drag outside. A ghost item is kept there.

[pedroadame]

Bug workaround:

Sortable.create(list, {
onRemove: function(evt){
    var ch = evt.from.children;
    for(var i = 0; i < ch.length; i++){
      var element = ch[i];
      if(window.getComputedStyle(element).getPropertyValue('display') == 'none'){
        element.parentNode.removeChild(element);
      }
    }
  }
}

[pedroadame]

Fixed in 1.5.1