@extends('layout.master') @section('content')

SortableJs

Reorderable drag-and-drop lists for modern browsers and touch devices. Read the Official SortableJs Documentation for a full list of instructions and other options.

Simple list
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
Handle
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
Shared lists

Try dragging from one list to another.

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
Cloning

Try dragging from one list to another. 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
Disabling 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.

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
Filter

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

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
Grid example
item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12
item 13
item 14
item 15
Nested sortables

NOTE: When using nested Sortables with animation, it is recommended that the fallbackOnBody option is set to true.
It is also always recommended that either the invertSwap option is set to true, or the swapThreshold option is lower than the default value of 1 (eg 0.65).

item 1.1
item 2.1
item 2.2
item 3.1
item 3.2
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
@endsection @push('plugin-scripts') @endpush @push('custom-scripts') @endpush