Cannot drop outside items inside a sortable container

[boris-petrov]

We have a use case where we have a sortable container and one can reorder items inside but we want to also be able to drop items from the outside into it. For the best UX one would expect that while the user is dragging some outside object over the sortable container, the items will be shifted apart to make space for the new one in the place where his cursor is. If he drops the new item, it will be placed there. If he drags away from the sortable container, the items should be "merged" again.

I guess our use case could be fixed by you triggering a couple of new events - dragNewItemOver, dragNewItemOut - in your code. Then we would be free to add/remove the dragged object to the sortableObjectList.

Additionally, the sortEndAction should not be triggered for dragged items that are not part of the sortableObjectList, because the user might not have added the item in the list.

[dgavey]

I'm currently working on a PR that will allow items to be freely dropped from one container to another. There is also another PR #52 that exposes an event similar to what you're looking for I think. Having items shift around to make space is also on my todo list. I'll see what I can do to accommodate some of those event ideas.

[rossanthony]

Hi @dgavey Just wondering what the status of this is? We also have a similar use case to the one mentioned by @boris-petrov, where we'd like to have a #sortable-objects container and be able to drag items from outside into it and the sortable-objects would then reorder around the newly placed item depending on where it's dropped.

[boris-petrov]

Not sure if this was true before, but I'm getting the following errors when dragging an outside item inside a sortable container:

ember.debug.js:19829 TypeError: Cannot read property 'get' of undefined
    at Class.moveObjectPositions (drag-coordinator.js:129)
    at Class.moveElements (drag-coordinator.js:147)
    at Class.draggingOver (drag-coordinator.js:68)
    at Class.dragOver (draggable-object.js:120)
    at Class.trigger (ember.debug.js:44830)
    at Class.superWrapper [as trigger] (ember.debug.js:42849)

On this line:

// Move if items are in different sortable-objects component
var aList = aSortable.get('sortableObjectList');

Is there any progress on this issue @dgavey?