Dragging a second list item creates shadow at wrong place

[hiaux0]

Note left list pos 4.

This is due to setting the position of the shadow to be absolute. Seems like the relative parent is the whole container.

[hiaux0]

Solution Attempt 1

In initial post, the the second list was inside <simple-list> view. This wouldn't allow <simple-list> to be reusable, thus I refactored it to only receive listData from outside, ie. remove the second <ul>

Problem

When 2 component are present, the drag color change on valid drop position will not trigger.

[hiaux0]

Removed this.dd.draggel, which was used as a global variable. Instead always get draggel from the event argument from interactjs

[hiaux0]

Problem

When 2 <simple-list>s are present, the "last" one works normally, whereas the "first" one throws error:

drag-drop-v1.js?c532:258 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at Eventable.onDrop [as ondrop] (webpack-internal:///resources/attributes/drag-drop-v1:111:14)

[hiaux0]

https://github.com/hiaux0/Coding-2/issue_comments#issuecomment-411525836

Images show, that there are multiple reffels triggered. Looks like this this.dd is really a bad idea.

[hiaux0]

https://github.com/hiaux0/Coding-2/issue_comments#issuecomment-411527202

Reason was "this" global usage again. Solution: use event argument