SortableJS

SortableJS JavaScript library for reorderable drag-and-drop lists.

SortableJS documentation

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="../node_modules/sortablejs/Sortable.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

              
                <script href="../assets/js/hs.sortable.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of sortable
                    $('.js-sortable').each(function () {
                      var sortable = $.HSCore.components.HSSortable.init($(this));
                    });
                  });
                </script>

Simple list example

Shared lists

Use "group": "listGroupName"

Disable sorting

Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.

Handle

Filter

Try dragging the item with a red background. It cannot be done, because that item is filtered out using the filter option.

Grid

Nested

Multiple Drag

The MultiDrag option allows for multiple items to be dragged at a time. You can click to "select" multiple items, and then drag them as one item.

Use "multiDrag": true

Swap

The Swap option changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.

Use "swap": true

Data-href

Use data-href="" to set a link instead of the traditional <a href=""></a> where you have multiple inner links.

Data-href with modal example

Methods

Parameters Description Default value

ghostClass

 Class when draging. sortable-chosen-main