Vendor Plugin

Vendor : Sortablejs

Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices.

  • Supports touch devices and modern browsers (including IE9)
  • 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
  • https://github.com/SortableJS/Sortable
  • License: MIT 

/* 
	:: Vendor Path
	node_modules/sortablejs/

	:: Installed
	npm install sortablejs

	:: SOW Controller Init
*/	$.SOW.vendor.sortable.init('.sortable');


/* 
	:: Plugin Options|Defaults

*/	$.SOW.vendor.sortable.init('.sortable', {
		dataIdAttr: 		'data-id', // used by ajax (as item/database id)
		handle: 		'.sortable-handle',
		animation: 		150,
		ghostClass: 		'bg-primary-soft',
		chosenClass: 		'bg-white-alt',
		swapClass: 		'bg-warning-soft',
		filter: 		'.js-ignore', // 'filtered' class is not draggable

		headers: 		'', // jQuery ajax POST request headers (optional)
		crossDomain: 		'', // jQuery ajax POST request crossDomain (optional)
});

Basic/Static

Item 1
Item 2
Disabled
Item 4
Item 5
Item 6
<!--
	Static, doing nothing comparing to Ajax.
	Might be used inside a form with hidden inputs and
	updated when user click "Submit" button!

	data-sort-disable="true"	- disable sorting by param
-->
<div class="list-group sortable">
	<div class="list-group-item">Item 1</div>
	<div class="list-group-item">Item 2</div>
	<div class="list-group-item js-ignore">Disabled</div>
	<div class="list-group-item">Item 4</div>
	<div class="list-group-item">Item 5</div>
	<div class="list-group-item">Item 6</div>
</div>

Swap Effect

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<!--
	data-sort-swap="true"	- enable swapping effect
-->
<div class="list-group sortable" data-sort-swap="true">
	<div class="list-group-item">Item 1</div>
	<div class="list-group-item">Item 2</div>
	<div class="list-group-item">Item 3</div>
	<div class="list-group-item">Item 4</div>
	<div class="list-group-item">Item 5</div>
	<div class="list-group-item">Item 6</div>
</div>

Using Handle

Item 1
Item 2
Disabled
Item 4
Item 5
Item 6 

<div class="list-group sortable">
	<div class="list-group-item">
		<span class="sortable-handle fi fi-list float-start"></span>
		Item 1
	</div>
	<div class="list-group-item">
		<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">
		<span class="sortable-handle fi fi-list float-start"></span>
		Item 4
	</div>
	<div class="list-group-item">
		<span class="sortable-handle fi fi-list float-start"></span>
		Item 5
	</div>
	<div class="list-group-item">
		<span class="sortable-handle fi fi-list float-start"></span>
		Item 6
	</div>
</div>

Ajax : Live Reorder Achived using SOW Sortablejs Controller

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">Item 1</div>
	<div data-id="2" class="list-group-item">Item 2</div>
	<div data-id="3" class="list-group-item">Item 3</div>
	<div data-id="4" class="list-group-item">Item 4</div>
	<div data-id="5" class="list-group-item">Item 5</div>
	<div data-id="6" class="list-group-item">Item 6</div>
</div>

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">Item 1</div>
	<div class="list-group-item">Item 2</div>
	<div class="list-group-item">Item 3</div>
	<div class="list-group-item">Item 4</div>
	<div class="list-group-item">Item 5</div>
	<div class="list-group-item">Item 6</div>
</div>

<!-- list 2 -->
<div class="list-group sortable" data-shared-group="client-list">
	<div class="list-group-item">Item 1</div>
	<div class="list-group-item">Item 2</div>
	<div class="list-group-item">Item 3</div>
	<div class="list-group-item">Item 4</div>
	<div class="list-group-item">Item 5</div>
	<div class="list-group-item">Item 6</div>
</div>

Cloning The item you drag will be cloned and the clone will stay in the original list.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<!--
	Two params are required:
		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">Item 1</div>
	<div class="list-group-item">Item 2</div>
	<div class="list-group-item">Item 3</div>
	<div class="list-group-item">Item 4</div>
	<div class="list-group-item">Item 5</div>
	<div class="list-group-item">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">Item 1</div>
	<div class="list-group-item">Item 2</div>
	<div class="list-group-item">Item 3</div>
	<div class="list-group-item">Item 4</div>
	<div class="list-group-item">Item 5</div>
	<div class="list-group-item">Item 6</div>
</div>

Grid Example

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

<div class="sortable">
	<div class="w--120 h--120 shadow-md border rounded p-2 m-2 d-inline-block">Item 1</div>
	<div class="w--120 h--120 shadow-md border rounded p-2 m-2 d-inline-block">Item 2</div>
	<div class="w--120 h--120 shadow-md border rounded p-2 m-2 d-inline-block">Item 3</div>
	<div class="w--120 h--120 shadow-md border rounded p-2 m-2 d-inline-block">Item 4</div>
	<div class="w--120 h--120 shadow-md border rounded p-2 m-2 d-inline-block">Item 5</div>
	<div class="w--120 h--120 shadow-md border rounded p-2 m-2 d-inline-block">Item 6</div>
</div>

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>
Jump To