VisualNEO Web

Plugin for reorderable drag-and-drop elements.
V:1.0

Based on:
https://github.com/SortableJS/Sortable
https://sortablejs.github.io/Sortable/

Description

The neoSort plugin for VisualNEO Web enables reorderable drag-and-drop elements within a container or across multiple containers. Built on the SortableJS library, this plugin is ideal for interactive lists, task management apps, or any interface where item organization is essential. Here’s a detailed overview of its primary commands and applications:

Sorting Items Within a Container: The neoSort command allows items within a single container to be dragged and reordered, with options for animation and optional event handling.

• Command: neoSort
• Syntax: neoSort "objId" theSwap "theHandle" theAnimationTime theSubroutine
• objId: The ID of the container with items to sort.
• theSwap: Enables item swapping if set to true.
• theHandle: Specifies a CSS class as the drag handle (e.g., .handle). Leave empty to use the entire item as the handle.
• theAnimationTime: Duration of the animation in milliseconds (e.g., 150).
• theSubroutine: Optional callback subroutine triggered upon reordering.

Example:

neoSort "taskList" true ".drag-handle" 200 "onSortComplete"

This command enables reordering in the taskList container, allows item swapping, and uses .drag-handle as the handle, with a 200ms animation and an onSortComplete subroutine for post-sort actions​.

Sorting and Moving Items Across Containers: The neoSortGroup command allows items to be moved and sorted between two or more containers, useful for multi-list management or categorization tasks.

• Command: neoSortGroup
• Syntax: neoSortGroup "objId" "groupName" thePut theSortable theSwap "theHandle" theAnimationTime theSubroutine
• objId: Container ID with items to sort.
• groupName: Shared group name for containers, allowing cross-container sorting.
• thePut: Allows items to be moved to other containers in the group if true.
• theSortable: Enables sorting within containers if true.
• theSwap: Allows swapping items if true.
• theHandle: CSS class for drag handle; leave empty to make the entire item draggable.
• theAnimationTime: Animation time for reordering.
• theSubroutine: Optional subroutine for handling reordering events.

Example:

neoSortGroup "list1" "groupA" true true true ".drag-handle" 150 "onGroupSort"

In this setup, items in list1 can be sorted and moved across any containers with the groupA group name, using .drag-handle as the drag element, with a 150ms animation​.

Practical Applications

The neoSort plugin is ideal for:

• Task Managers: Allowing users to organize tasks within or across lists.
• Shopping Carts: Enabling reorderable items in carts or wishlists.
• Content Organizers: Interactive sorting of content blocks, such as gallery items or blog lists.
  
  

By adding sortable and draggable functionality, the neoSort plugin enhances user interaction, making it an invaluable tool for organized and responsive applications in VisualNEO Web.

neoSort

neoSortGroup

neoSortGetItems

neoSortSwapItems

Created with the Personal Edition of HelpNDoc: Why Microsoft Word Isn't Cut Out for Documentation: The Benefits of a Help Authoring Tool