Vendor : Sortablejs
Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices.
- License: MIT
- https://github.com/SortableJS/Sortable
src/js/vendors/vendor.sortable.js
Overview
- Supports touch devices and modern browsers
- Can drag from one list to another or within the same list
- CSS animation when moving items
- Supports drag handles and selectable text (better than voidberg's html5sortable)
- Smart auto-scrolling
- Advanced swap detection
- Smooth animations
- Built using native HTML5 drag and drop API
Sortablejs Basic
Item 1
Item 2
Disabled
Item 4
Item 5
Item 6
<div class="list-group sortable">
<div class="list-group-item py-3">Item 1</div>
<div class="list-group-item py-3">Item 2</div>
<div class="list-group-item py-3 js-ignore">Disabled</div>
<div class="list-group-item py-3">Item 4</div>
<div class="list-group-item py-3">Item 5</div>
<div class="list-group-item py-3">Item 6</div>
</div>
Sortablejs Swap Effect
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div class="list-group sortable" data-sort-swap="true">
<div class="list-group-item py-3">Item 1</div>
<div class="list-group-item py-3">Item 2</div>
<div class="list-group-item py-3">Item 3</div>
<div class="list-group-item py-3">Item 4</div>
<div class="list-group-item py-3">Item 5</div>
<div class="list-group-item py-3">Item 6</div>
</div>
Sortablejs Handle
Item 1
Item 2
Disabled
Item 4
Item 5
Item 6
<div class="list-group sortable">
<div class="list-group-item py-3">
<span class="sortable-handle fi fi-list float-start"></span>
Item 1
</div>
<div class="list-group-item py-3">
<span class="sortable-handle fi fi-list float-start"></span>
Item 2
</div>
<div class="list-group-item js-ignore">
<span class="sortable-handle fi fi-list float-start"></span>
Disabled
</div>
<div class="list-group-item py-3">
<span class="sortable-handle fi fi-list float-start"></span>
Item 4
</div>
<div class="list-group-item py-3">
<span class="sortable-handle fi fi-list float-start"></span>
Item 5
</div>
<div class="list-group-item py-3">
<span class="sortable-handle fi fi-list float-start"></span>
Item 6
</div>
</div>
Sortablejs Ajax Update
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<!--
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
NOTE: Ajax requests are sent using 'POST' type and cannot be changed!
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Turn any .sortable to ajax by adding:
data-ajax-update-url="../demo.files/php/demo.ajax_request.php"
data-ajax-update-identifier="client_list"
data-update-toast-success="Order Saved!"
data-update-toast-position="bottom-center"
data-id="..." usually database item id
data-update-ajax-identifier="..." backend identifier to know what to update
* data-ajax-update-params can be used instead.
multiple optional params/identifiers to send to your backend
data-ajax-update-params="['action','update']['param2','value2']"
Note: debug is turned on by sow.config.js - check your console for ajax request.
-->
<div class="list-group sortable"
data-ajax-update-url="../demo.files/php/demo.ajax_request.php"
data-ajax-update-identifier="client_list"
data-ajax-update-params="['action','update']['param2','value2']"
data-update-toast-success="Order Saved!"
data-update-toast-position="bottom-center">
<div data-id="1" class="list-group-item py-3">Item 1</div>
<div data-id="2" class="list-group-item py-3">Item 2</div>
<div data-id="3" class="list-group-item py-3">Item 3</div>
<div data-id="4" class="list-group-item py-3">Item 4</div>
<div data-id="5" class="list-group-item py-3">Item 5</div>
<div data-id="6" class="list-group-item py-3">Item 6</div>
</div>
Sortablejs Shared Lists
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<!--
To share multiple lists, add:
data-shared-group="..." must be all the same
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
NOTE: Ajax requests are sent using 'POST' type and cannot be changed!
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Ajax note: Each list should have its own ajax params:
data-ajax-update-url="../demo.files/php/demo.ajax_request.php"
data-ajax-update-identifier="client_list_1"
data-ajax-update-params="['action','update']['param2','value2']"
data-update-toast-success="Order Saved!"
data-update-toast-position="bottom-center"
And also, data-id="..." added to each item
-->
<!-- list 1 -->
<div class="list-group sortable" data-shared-group="client-list">
<div class="list-group-item py-3">Item 1</div>
<div class="list-group-item py-3">Item 2</div>
<div class="list-group-item py-3">Item 3</div>
<div class="list-group-item py-3">Item 4</div>
<div class="list-group-item py-3">Item 5</div>
<div class="list-group-item py-3">Item 6</div>
</div>
<!-- list 2 -->
<div class="list-group sortable" data-shared-group="client-list">
<div class="list-group-item py-3">Item 1</div>
<div class="list-group-item py-3">Item 2</div>
<div class="list-group-item py-3">Item 3</div>
<div class="list-group-item py-3">Item 4</div>
<div class="list-group-item py-3">Item 5</div>
<div class="list-group-item py-3">Item 6</div>
</div>
Sortablejs Cloning
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<!--
data-shared-group="..."
data-pull-mode="clone"
data-put-denied="true" - do not allow to clone into this list (default: false)
data-sort-disable="true" - disable sorting for this list (default: false)
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
NOTE: Ajax requests are sent using 'POST' type and cannot be changed!
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Ajax note: Each list should have its own ajax params:
data-ajax-update-url="../demo.files/php/demo.ajax_request.php"
data-ajax-update-identifier="client_list_1"
data-ajax-update-params="['action','update']['param2','value2']"
data-update-toast-success="Order Saved!"
data-update-toast-position="bottom-center"
And also, data-id="..." added to each item
-->
<!-- list 1 -->
<div class="list-group sortable" data-shared-group="client-list2" data-pull-mode="clone">
<div class="list-group-item py-3">Item 1</div>
<div class="list-group-item py-3">Item 2</div>
<div class="list-group-item py-3">Item 3</div>
<div class="list-group-item py-3">Item 4</div>
<div class="list-group-item py-3">Item 5</div>
<div class="list-group-item py-3">Item 6</div>
</div>
<!-- list 2 -->
<div class="list-group sortable" data-shared-group="client-list2" data-pull-mode="clone">
<div class="list-group-item py-3">Item 1</div>
<div class="list-group-item py-3">Item 2</div>
<div class="list-group-item py-3">Item 3</div>
<div class="list-group-item py-3">Item 4</div>
<div class="list-group-item py-3">Item 5</div>
<div class="list-group-item py-3">Item 6</div>
</div>
Sortablejs Grid
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div class="sortable">
<div style="width:120px;height:120px" class="shadow border p-2 m-1 d-inline-block">Item 1</div>
<div style="width:120px;height:120px" class="shadow border p-2 m-1 d-inline-block">Item 2</div>
<div style="width:120px;height:120px" class="shadow border p-2 m-1 d-inline-block">Item 3</div>
<div style="width:120px;height:120px" class="shadow border p-2 m-1 d-inline-block">Item 4</div>
<div style="width:120px;height:120px" class="shadow border p-2 m-1 d-inline-block">Item 5</div>
<div style="width:120px;height:120px" class="shadow border p-2 m-1 d-inline-block">Item 6</div>
</div>
Sortablejs Nested
Item 1.1
Item 2.2
Item 3.2
Item 2.1
Item 3.1
Item 3.3
Item 3.4
Item 2.3
Item 2.4
Item 1.2
Item 1.3
Item 1.4
Item 2.1
Item 2.2
Item 2.3
Item 2.4
Item 1.5
<!--
Note: cannot drag Item 1.3 inside Item 1.2
because Item 1.2 missing .sortable class and data-sortable-type="nested"
Ajax Note:
Ajax params must be added to each .sortable
Ajax request is sent for the changed .sortable, not for all at once!
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
NOTE: Ajax requests are sent using 'POST' type and cannot be changed!
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
data-ajax-update-url="../demo.files/php/demo.ajax_request.php"
data-ajax-update-identifier="category_1"
data-ajax-update-params="['action','update']['param2','value2']"
data-update-toast-success="Order Saved!"
data-update-toast-position="bottom-center"
data-sortable-type="nested" required to each .sortable
-->
<div class="list-group sortable" data-sortable-type="nested">
<div class="list-group-item">Item 1.1
<div class="list-group sortable" data-sortable-type="nested">
<div class="list-group-item" style="">Item 2.2
<div class="list-group sortable" data-sortable-type="nested">
<div class="list-group-item">Item 3.2</div>
<div class="list-group-item">Item 2.1</div>
<div class="list-group-item">Item 3.1</div>
<div class="list-group-item">Item 3.3</div>
<div class="list-group-item">Item 3.4</div>
</div>
</div>
<div class="list-group-item">Item 2.3</div>
<div class="list-group-item">Item 2.4</div>
</div>
</div>
<div class="list-group-item">Item 1.2</div>
<div class="list-group-item">Item 1.3</div>
<div class="list-group-item">Item 1.4
<div class="list-group sortable" data-sortable-type="nested">
<div class="list-group-item">Item 2.1</div>
<div class="list-group-item">Item 2.2</div>
<div class="list-group-item">Item 2.3</div>
<div class="list-group-item">Item 2.4</div>
</div>
</div>
<div class="list-group-item">Item 1.5</div>
</div>