SortableJS

Dokumentasi SortableJS

Cara Pakai

Copy-paste script berikut sebelum tag penutup <body>

    
      <script>
        (function() {
          // INITIALIZATION OF SORTABLE
          // =======================================================
          Nue.components.NueSortable.init('.js-sortable')
        });
      </script>

Simple list example

Shared lists

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

Links

Data-href with modal example

Methods

ParameterDeskripsiNilai default

ghostClass

Class when draging.sortable-chosen-main