Closed
Description
Describe the bug
- When in
forceFallback: true
, and thehandle
or list content is a web component with an open shadowRoot items cannot be dragged. - In our usage, our handle element is another custom element with shadowRoot and the content within a sortable element is also a custom element.
- The code problem area is seen in this section:
Lines 756 to 759 in 07708fa
- With this line
target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY);
, its returning elements within ourhandle
custom element or content custom element instead of a child of the Sortable instance. - This only happens when in
forceFallback: true
or when used by a mobile device which seems to always go into fallback mode. - When using native drag and drop the issue is not seen.
To Reproduce
Steps to reproduce the behavior:
- Go to https://codepen.io/driskull/pen/OJqrzVL?editors=1010
- Try to drag a handle over another handle and notice it won't swap elements
- Drag a handle over a list element textContent and notice it does swap
- If there are other custom-elements inside the list-element in place of the text content elements won't swap either.
- See sample: https://codepen.io/driskull/pen/xxBmpra?editors=0110
Expected behavior
I would expect sort swapping to work when a handle or content within a list is a custom element.
Information
sortablejs = ^1.15.1
@types/sortablejs = ^1.15.1
Additional context
I have a PR open to fix this but need verification that it is the best approach to fixing the issue.
Reproduction
codesandbox: https://codepen.io/driskull/pen/OJqrzVL?editors=1010 and https://codepen.io/driskull/pen/xxBmpra?editors=0110
Pull Request Fix
Metadata
Metadata
Assignees
Labels
No labels