search

SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.7k stars 3.7k forks source link

Sortablejs and wysiwyg editors conflict[bug] #2123

Open millertn opened 2 years ago

millertn commented 2 years ago

Describe the bug

Currently if you have a wysiwyg text editor (I have used RoosterJS, Froala, and QuillJS) nested inside of an element that has Sortable.create called on it, window.getSelection no longer works properly and breaks all the text-editor functionality. I have a demo of this happening in an Angularproject, and can have a demo of it happening in an Aurelia framework environment upon request if there is interest in it. it produces the same results

Expected behavior

I would expect to use any text editor as expected whether its nested in a sortable div or not

Information

Versions - Look in your package.json for this information: sortablejs = ^1.14.0 roosterjs = ^8.12.0 roosterjs-editor-api = ^8.12.0 froala-editor = ^4.0.8

Additional context Add any other context about the problem here.

Reproduction Angular github repo: https://github.com/millertn/sortable-wysiwyg-angular

JCandre commented 2 years ago

I fixed this issue by specifying the drag handle selector within the list items. Make the handle a button or something that the user has to click and hold, rather than allowing anywhere in the draggable element to be used for dragging which causes the conflict.

Hope that makes sense.