How to use InteractJS on your application? 

Step 1 - Load InteractJs

Add the InteractJS webblock in the screen where you want drag and drop behavior.

This webblock has 3 input parameters and 3 events that can be used to react to the interactions:

• RestrictContainerId - Mandatory - The container Id for the wrapper of the interaction area.
  We will configure this on the next step
• DropzoneRestrict - Mandatory - Controls whether the elements can be dropped outside existing dropzone elements.
  When set to True the draggable elements can only be dropped in valid dropzone areas, if an element is dropped anywhere else it will float back to its original position.
  When set to False the draggable elements can be dropped anywhere (inside the RestrictContainer) - see the demo example InteractJS_Demo/DragPosition
• UpdateDOM - Optional, defaults to false - Controls whether the javacript should handle moving elements in the DOM, according to the user interaction.
  With the default value of False the DOM is not automatically updated. When elements are dropped into dropzones, you can react to the OnDrop event and create your client logic to handle it.
  When set to True the DOM node relative to the Draggable element webblock is appended as a child of the dropzone element, when dragged into it - see the demo example InteractJS_Demo/ImageLists
• OnDragStart - Triggered when a drag action ends
• OnDragEnd - Triggered when a draggable element is picked up
• OnDrop - Triggered when a draggable element is dropped on a dropzone

Step 2 - Setup Interaction area

Create a container where the interaction will occur and give it a name to access it's Id. Fill in the InteractJS_Main webblock > RestrictContainerId with the appropriate value.

Here I've configured the DropzoneRestrict property to True, to make sure elements can only be dropped in defined dropzones.

Step 3 - Source Data

In this example I'll be using 2 text lists, with the purpose of dragging from one to the other.

For the UI I used 2 list widgets with some basic style on the child container. The default style classes (list list-group) were removed from the list widget to allow the draggable elements to remain visible when dragged around.
On the OnInitialize I've appended 5 strings to the List1 as dummy data for this example.

Step 4 - Create the interaction

Add one InteractJS\Draggable webblock and 1 InteractJS\Dropzone, and position them in the Widget Tree as shown. 

The Draggable will be single child elements of the list widget, with the actual list element container inside the DraggableElement placeholder. I'm also setting the ElementId of the draggable element the same as its text content.

The Dropzone should have the entire list inside its placeholder. For the ElementId I simply wrote "List2"

Step 5 - Handle the drop event

Create the logic to handle the drop event, such as removing the element from the list and adding it to the other one, as per the example below:

That's it, you can now drag elements to the dropzone, and they will be appended to the second list.

Additional Notes

By default no styles are applied to the draggable or the dropzone elements, in your theme you can target the following classes to apply the desired styling to each element and status:

.draggable - Base style of the elements that will be dragged, this class is always present in the draggable elements

.dragging - This class is added to the draggable element when the drag action starts, you can use it if you wish to differentiate the style of the element being moved

.can-drop - This class is added to the draggable element when hovering on a dropzone, you can use it if you wish to differentiate the style of that element when a valid drop can be achieved

.dropzone - Base style of the dropzone elements, this class is always present except in the DragDrop webblock (in this particular case the .dropzone class is removed for the element being dragged so that it cannot be dropped onto itself)

.drop-active - This class is added to all the dropzone elements when a drag action starts, you can use it if you wish to highlight the dropzones on the screen

.drop-target - This class is added to the dropzone element when a draggable is hovering on it, you can use it if you wish to differentiate the style of that dropzone when a valid drop can be achieved