aciSortable demo - Sort a list of items (including nested items)

Note: only on examples that implement the exclude option the dark grey background items/containers are items that can't be dragged and containers that can't receive dragged items.

Please note that the callback functions from inside the options object (used to initialise the sortable) have a default implementation needed for the sortable to work. You can provide your own implementations on init, but you must ensure all are valid as required by the plugin.

Using with the default options (see below for examples using the options callbacks and custom animations; Note: the yellow background examples are made using the events instead of options callbacks, to disable the default implementation of options callbacks - when using events - pass NULL to the options callbacks on init):

Using the options.exclude to exclude items to be dragged and containers to receive dragged items:

Show how options.before, options.create and options.valid callbacks can be used to prevent dragging a item and to prevent drop to a target (instead of using options.exclude as in the prevoius example):

Note: invalid drop targets - like before/after the sorted item, parent dragged over his childrens, item dragged outside of the top container etc. are not considered when calling options.before and options.valid. They are seen from the start as invalid drop targets.

Item 1 link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Item 1 link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Add an extra class on the sorted item and change his background (using the options.start and options.end callbacks). The class is removed once the dragged item is released:

Item 1 link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Item 1 link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Hide the dragged item and show the item contents inside the placeholder (using options.start and options.end):

Item 1 link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Item 1 link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Same as previous example ... but always show the placeholder (using the options.gluedPlaceholder option):

Note: once dropped, the dragged item will be moved where the placeholder is (even if the mouse was outside the top container - for example).

Show the item content inside the helper (using the options.start callback), position the helper relative to the starting drag point (using options.relative) and set opacity (so we can see the drop target beneath the helper):

Item 1 link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Item 1 link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Show a custom helper content based on the placeholder position (using the options.drag and options.valid callbacks):

Item 1 link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Item 1 link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Connect more sortables together for drag&drop. Notice the use of the options.connectDrop for each of them, meaning each of the aciSortable can drop items to the other aciSortable(s). The dragged item will be passed to the target aciSortable instance once we hover over one, this means the final drop (options.end callback) will be handled by the destination aciSortable instance and not the source:

Item 1A link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Item 1B link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Item 1C link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Item 1A link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Item 1B link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Item 1C link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo dolor magna, ac lacinia odio. Mauris eget viverra est. Suspendisse potenti. Donec mollis, magna ac consectetur iaculis, nisi felis mollis mi, at consectetur justo tortor nec neque. Fusce sodales ullamcorper metus, lacinia placerat leo molestie vitae. Ut nec enim sem, quis tristique orci. Duis lobortis quam ac massa tincidunt id pharetra libero facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vel purus lacus. Fusce auctor rutrum quam, a sollicitudin purus lobortis et. Aenean non lorem vel ligula euismod interdum. Sed sit amet scelerisque lectus. Nunc rutrum varius sapien sit amet pellentesque.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque nulla lectus, mollis vel rutrum nec, rhoncus sit amet lacus. Duis pretium vehicula lectus, eget adipiscing neque volutpat a. Nulla a elit quis orci laoreet luctus. Integer eleifend ante pulvinar neque feugiat mattis. Phasellus ornare tempus imperdiet. Ut sit amet arcu leo, in bibendum ante. Aenean vel magna in arcu consequat ultrices.

Item 1 link text area
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
- Item 2.4
  - Item 2.4.1
  - Item 2.4.2
  - Item 2.4.3
- Item 2.5
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
- Item 12.1
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26

Using options.dropPosition to set the drop position into last place for the right-side sortable, also the items can't be sorted for the right-side sortable:

Using options.simpleDrop to connect with a element that does not need to be an aciSortable instance. This is similar with options.connectDrop but - because the destination it's not an aciSortable instance - the source of the dragged element need to handle the drop to the target (using the options.end callback):