Describe the bug
- When in
forceFallback: true, and the handle 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:
|
while (target && target.shadowRoot) { |
|
target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY); |
|
if (target === parent) break; |
|
parent = target; |
- With this line
target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY);, its returning elements within our handle 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
#2347
Describe the bug
forceFallback: true, and thehandleor list content is a web component with an open shadowRoot items cannot be dragged.Sortable/src/Sortable.js
Lines 756 to 759 in 07708fa
target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY);, its returning elements within ourhandlecustom element or content custom element instead of a child of the Sortable instance.forceFallback: trueor when used by a mobile device which seems to always go into fallback mode.To Reproduce
Steps to reproduce the behavior:
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
#2347