1. Drag and Drop Functionality Scope

Use cases:

Within Cypht webmail

• Move messages between folders within the same account:

Users should be able to efficiently transfer messages from one folder to another within the same account.

• Move folders between accounts:

The system should support the relocation of entire folders from one email account to another.

Related issue: https://github.com/cypht-org/cypht/issues/216

Within Tiki

• Kanban board (Currently used SortableJS, as indirect dependency of vuedraggable)
• tiki admin menu (Currently uses SortableJS, from tiki-admin_menu_options.js)
• drag and drop wiki pages to structures (Currently uses SortableJS, from tiki-edit_structure.js)
• debugger (Currently uses interact.js from function.debugger.php)
• PluginTOC (Currently uses https://jqueryui.com/sortable/ from wikiplugin_toc.php)
• WikipluginList Gui (Currently uses https://jqueryui.com/sortable/ from wikiplugin_list.php, plugintedit_list.js and lib/core/Services/Edit/Controller.php)
• drag and drop menus
• drag and drop modules
• files and file galleries
• This is looking ahead, but I hope drag-and-drop page blocks (ex: https://grapesjs.com/).
• etc.

Supported Elements:

The drag and drop library should provide comprehensive support for all HTML elements, ensuring that users can seamlessly drag and drop a wide range of elements, including but not limited to text, images, documents, widgets, and custom components. The library should be designed to handle diverse diverse HTML structures and content types with consistency and reliability.

Compatibility

The library must deliver consistent and intuitive drag and drop functionality across all platforms, emphasizing seamless performance on touch-enabled devices such as tablets and mobile phones, as well as desktops and laptops. Additionally, it should ensure full compatibility with major web browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and others, to guarantee a uniform and reliable user experience across diverse browsing environments.

Accessibility

Ensure that the library is accessible, adhering to accessibility standards to accommodate users with disabilities.

Constraints

The drag and drop library must offer the capability to define specific zones where drag and drop actions are restricted or limited.

2. Potential Options

a) SortableJS

https://sortablejs.github.io/Sortable/
https://www.openhub.net/p/SortableJS

• Advantages:
  • Demonstrates high activity, with the last commit made almost a month ago.
  • Offers cool features such as support for touch devices, Bootstrap (utilized in Tiki), and more.
  • Implementation is straightforward.
  • Already used in tiki in several places, so developer familiarity can be reused.

• Disadvantages:
  • Lacks support for IE9-.

• Suitable for:
  • Lists, moving items, and reordering.

b) interact.js

https://interactjs.io/
https://www.openhub.net/p/interact_js
https://github.com/taye/interact.js

• Advantages:
  • Displays high activity, with the last commit made a week ago.
  • Boasts excellent and detailed documentation.
  • Features include resize, zoom, and compatibility with SVGs.

• Disadvantages:
  • Not as easy to implement as SortableJS.

• As implied by its name, it is most suitable for interactions, making it a preferable choice for module management in Tiki.*

c) Dragula

https://bevacqua.github.io/dragula/
https://www.openhub.net/p/Dragula

• Advantages:
  • Supports IE7+.

• Disadvantages:*
  • Shows low activity, with the last commit made three years ago.
  • Lacks support for multidrag.

d) Draggable

https://github.com/Shopify/draggable
https://www.openhub.net/p/draggable-library

e) Muuri

https://github.com/haltu/muuri
https://www.openhub.net/p/muuri

f) zero-drag

https://github.com/mindplay-dk/zero-drag

g) HTML Drag and Drop API

• https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
• https://caniuse.com/?search=draganddrop
• https://html.spec.whatwg.org/multipage/dnd.html#dnd

My preference

Based on my (Merci Jacob) observation, I strongly advocate retaining the two libraries currently in use within Tiki:

1) Interact.js:
This library encompasses a multitude of features that are presently integral to our platform, particularly facilitating high-level interactions with UI elements. However, it lacks a straightforward method for enabling drag-and-drop functionalities within lists, necessitating the creation of custom code to manage such actions. Consequently, it remains a preferred choice due to its diverse functionalities and capabilities.

2) Sortable.js:
This library is specifically tailored for drag-and-drop sorting within lists and grids. Its focused nature on sorting functionalities makes it an optimal choice for efficiently managing the reordering of elements.

Implementation

It has been decided to use Sortable.js in Cypht for moving messages between folders. Therefore, it has been implemented in pull request https://github.com/cypht-org/cypht/pull/834.