Step 1 - Add the DragulaJS script to the page

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.

Step 2 - Import DragulaJS component to your screen

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.

Step 3 - Associate all the list elements with the DragulaJS component

After placing the component, make the association of the list identifiers to the component. The number of lists is unlimited.

Step 4 - Create all the logic to handler the notify event from the DragulaJS

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.