DOMExceptions with Dropzones

[EndenDragon]

Describe the bug I am encountering errors when dragging and dropping nested list. The issue only arises when showDropzoneAreas is enabled.

My element looks something like

<ul id="scoresheet-editor">
      <item :model="criteria" v-drag-and-drop:options="draggableOptions"></item>
</ul>

Where <item> is essentially a <li> with lots of other child elements inside... including a single <ul> which would contain more of .

<li>
    <ul>
        <item> <!-- more <item> -->
    </ul>
</li>

Expected behavior I expect there would not be an error when performing dropping action.

Screenshots

Desktop (please complete the following information):

• OS: Mac OS 10.13
• Browser Chrome 76

Additional context Add any other context about the problem here.

[nikolasp]

Hi @EndenDragon ,

Thanks for the feedback.

I'll try to reproduce this. In the meantime move v-drag-and-drop:options="draggableOptions" directive to the child component Item.

Thanks

[EndenDragon]

Hi @nikolasp , Thanks for the response. I moved it into the item and the error still persists. The only difference is that it doesn't handle reordering anymore. I am able to drag and the dropzones can be shown. However when dropped, nothing happens and the order of elements stays the same. I am using the same options as previous.

draggableOptions: {
                    dropzoneSelector: 'ul',
                    draggableSelector: 'li',
                    multipleDropzonesItemsDraggingEnabled: true,
                    reactivityEnabled: false,
                    onDrop: function (e) {
                    },
                }