[Tiki-devel] Replacing jQuery UI Sortable, UI Draggable, nestedSortable Plugins with SortableJS

Hello Tiki devs,

The problem: jQuery UI user interface library does not support the use of
touch events in their widgets and interactions. Some old solution:
https://github.com/furf/jquery-ui-touch-punch
Related:
https://avan.tech/item61462-Drag-and-drop-menu-management-Review-and-make-sure-it-s-very-stable

The purpose: *SortableJS* to replace the three plugins (and reduce the use
of jquery ui until it is completely replaced) - * jQuery UI Sortable*, *UI
Draggable* and* jQuery nestedSortable*.

The replacement will impact (some of the features I know):

   - Modules zones
   - Structure layout
   - Menus options
   - Admin option box
   - Other list structures

*SortableJS* is a JavaScript library for reorderable drag-and-drop lists.
Github Stars: 22.2K
Used by: 41.4k
Contributors: 143

SortableJS <http://sortablejs.github.io/Sortable/> - Examples (Simple
list, *Shared
lists*, Cloning, Disabling sorting, Handles, Filter, Thresholds, *Nested
Sortables*, *Grid*, MultiDrag, Swap)
GitHub: https://github.com/SortableJS/Sortable
NPM: https://www.npmjs.com/package/sortablejs

Asset Packagist:
https://asset-packagist.org/package/npm-asset/sortablejs

Pros:

   - Supports *touch devices* and modern browsers (including IE9)
   - *No jQuery* required (but there is support)
   - Can drag from one list to another or within the same list
   - CSS animation when moving items
   - Supports drag handles and selectable text (better than voidberg's
   html5sortable)
   - Smart auto-scrolling
   - Advanced swap detection
   - Smooth animations
   - Multi-drag support
   - Support for CSS transforms
   - Built using native HTML5 drag and drop API
   - Supports Vue, React, Angular, etc
   - Supports any CSS library, e.g. Bootstrap
   - Simple API
   - Support for plugins
   - CDN
   - Typescript definitions at @types/sortablejs

Cons:

If you have other suggestions or concerns please share them.

Best Regards,
Andon Andonov


<https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail&utm_term=icon>
Virus-free.
www.avast.com
<https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail&utm_term=link>
<#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

_______________________________________________
TikiWiki-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel