Step 1 - Add the DragulaJS script to the page
Import the DragulaJS script provided by the DragulaJS module, and add it to the required scripts of the screen where you want to enable drag‑and‑drop behavior.
Step 2 - Import DragulaJS component to your screen
Import the DragulaJS component into the page where you want to enable drag‑and‑drop behavior. Make sure this web block is placed after all list elements associated with the component.
Step 3 - Associate all the list elements with the DragulaJS component
After adding the component, associate the list identifiers with it. There is no limit to the number of lists you can include.
Step 4 - Create all the logic to handler the notify event from the DragulaJS
After associating all identifiers, the development team must implement the logic that handles item reordering and movement between lists, based on the Notify event returned by the component.
Additionally, for the component to function correctly, each list must contain at least one record or use the dragula-empty-list CSS class to prevent the list element from collapsing.
Import the DragulaJS script available on the DragulaJS module. Add it to the required script to the screen that you want to put drag and drop behavior.
Import the DragulaJS component to the page you want to put drag and drop behavior on. Note that it is essential that this webblock is placed after all list elements associated with the component.
After placing the component, make the association of the list identifiers to the component. The number of lists is unlimited.
After associating all identifiers, it is necessary for the developer team to create logic in order to make the reordering and movements between lists, considering the Notify returned by the component.
It is important to note that for the proper functioning of the component, each list must have at least one record or use the CSS class "dragula-empty-list" to prevent the list element from collapsing completely.