How to make the kanban board the whole kanban list droppable

[daiyis]

With the @angular-skyhook/sortable, The DropTarget is attached where [ssRender] is, so the card can only be drop to the card container area. Is there any way that we can make the whole kanban-list a drop target like the real trello board? eg: When drag a card to the bottom area in the "Done" list like below, it will be dropped as the last card in the list.

Trello example:

[cormacrelf]

That statement isn’t correct. Try emptying a list. You can still drag a card onto it. This is because the surrounding element is already a drop target; AND when it’s empty, there is a CSS min-height that ensures you can still drop on it.

So, just make the container surround the list and grow itself like horizontal flex children normally do.

[daiyis]

@cormacrelf Thanks for the reply. sorry I misunderstood the code and the container indeed is also a drop target. However, just making the container grow itself seems can't achieve the same Trello example. It only works with the empty list and will stop working if there are already cards in the list. As the code shows in the sortable.directive.ts:

            hover: monitor => {
                const item = monitor.getItem();
                if (this.children && **isEmpty**(this.children) && item) {
                    const canDrop = this.getCanDrop(item);
                    if (canDrop && monitor.isOver({ shallow: true })) {
                        this.callHover(item, {
                            listId: this.listId,
                            index: 0,
                        });
                    }
                }
            }

looks it only handles the empty children kanban-list and return 0 index. But not the case that dragging an item to a non-empty list(as the trello example, drag to the very bottom container area without cards) which should return an index as the last one in children? I am not quiet sure if this will cause drop conflicts between the card drop target and the container drop target for a normal dnd between cards.

[cormacrelf]

Oh yeah. True.

You can also add a big spill target behind the container and handle the non empty case yourself if you like. The quiz example shows how to set one up and listen to hover and drop events.