Purpose:

This draggable container component allows users to easily sort items within containers using drag-and-drop functionality. It provides a user-friendly interface for rearranging and organizing elements, improving efficiency and user experience in your web applications.

Key Features:

· Drag-and-Drop Sorting: Enables intuitive drag-and-drop interactions for reordering items within containers.

· Container Support: Works with various container elements, allowing flexibility in your design.

· Customizable Options: Provides options to configure draggable behavior, such as placeholder appearance and sorting restrictions.

· Database Integration (Optional): Can connect to a database to store and retrieve container positions, enabling persistent sorting across sessions.

· Local Storage Integration: Can store retrieve container positions in local storage.

· Event Triggering: Sends back relevant Drag and Drop and Sort events to your application logic for further processing.

Technical Implementation:

· Code: Built using JavaScript and jQuery, ensuring compatibility with OutSystems.

Data Source:

· In-Memory Storage: By default, the component stores container positions in local-storage memory for the current session.

· Database Integration (Optional): Can connect to a database using a data source block to retrieve and store container positions persistently.

User Interaction:

1. Download and Install: Ensure you have downloaded and installed the component within your development environment.

2. Drag the Block: Drag the component block onto your web page in the design editor.

3. Configure Options: Set the draggable options according to your specific needs, such as enabling/disabling dragging, specifying container elements, and customizing placeholder appearance.

4. Database Storage (Optional): If using database storage, insert a list element and set the appropriate property to connect to your database.

5. Create Events: Use client actions provided by the component to handle desired events like sort update, and implement your application logic accordingly.

Benefits:

· Faster Reordering: Drag-and-drop interaction significantly speeds up the process of re-arranging elements compared to manual methods.

· Intuitive Sorting: The visual feedback of dragging and dropping makes sorting user-friendly and straightforward.

· Customization: You can tailor the component's behavior and appearance to match your specific application needs.

· Database Integration (Optional): Enables persistent sorting data across sessions, enhancing user experience and data management.

Download Demo:

To experience the component in action and visualize its functionalities, download the provided demo version