Sortable

Functions

Util.sortable

Definition

Name
Util.sortable
Syntax
void = Util.sortable( Node scope [, JSON _options ] );

Description

Makes all or specific nodes in scope sortable, with callbacks on pick, move and drop.

Parameters

scope
Node scope containing sortable nodes
_options
JSON Optional rules for sorting
Options
picked
Name of callback function when element is picked (default picked)
moved
Name of callback function when element is moved (default moved)
dropped
Name of callback function when element is dropped (default dropped)
draggables
Classname on draggable nodes - only these will be draggable (default all li's)
targets
Classname on target nodes - you'll only be able to drag nodes to these elements (default first UL in scope)
layout
Force vertical/horisontal interpretation of scope (default auto-detect)
allow_nesting
Allow building nested structures when sorting nodes

Returns

Void

Callbacks

scope.picked(event)
when draggable node is picked
scope.moved(event)
when draggable node is moved
scope.dropped(event)
when draggable node is dropped

Uses

JavaScript
  • typeof
  • switch ... case
  • for ... in
  • document.createElement
  • document.appendChild
  • document.insertBefore
Manipulator
  • Util.querySelectorAll
  • Util.querySelector
  • Util.appendElement
  • Util.getComputedStyle
  • Util.applyStyle
  • Util.classVar
  • Util.actualHeight
  • Util.absoluteY
  • Util.absoluteX
  • Util.eventX
  • Util.eventY
  • Util.Events.kill
  • Util.Events.removeWindowEndEvent
  • Util.Events.removeWindowMoveEvent
  • Util.Events.addStartEvent
  • Util.Events.addWindowMoveEvent
  • Util.Events.addWindowEndEvent

scope.getStructure

Definition

Name
scope.getStructure
Syntax
void = scope.getStructure();

Description

Scope node is automatically extended with a getStructure method. It returns the structure of the sortable nodes in an Array.

Parameters

No parameters

Returns

Void

Examples

No examples

Uses

JavaScript

None

Manipulator
  • scope.getRelation
  • scope.getPositionInList

scope.disableNodeDrag

Definition

Name
scope.disableNodeDrag
Syntax
void = Util.sortable( Node node );

Description

Scope node is automatically extended with a disableNodeDrag method. It allows you to disable dragging on a specific node.

Parameters

scope
Node node to disable drag on

Returns

Void

Examples

No examples

Uses

JavaScript

None

Manipulator
  • Util.Events.removeStartEvent

Files

Main file

  • u-sortable.js

Segment support files

  • none

Segment dependencies

desktop_edge
u-sortable.js + u-dom.js + u-geometry.js + u-events.js + u-events-browser.js
desktop_ie11
u-sortable.js + u-dom.js + u-geometry.js + u-events.js + u-events-browser.js
desktop
u-sortable.js + u-dom.js + u-geometry.js + u-events.js + u-events-browser.js
desktop_ie10
u-sortable.js + u-dom.js + u-dom-desktop_ie10.js + u-geometry.js + u-events.js + u-events-browser.js
desktop_ie9
u-sortable.js + u-dom.js + u-dom-desktop_ie10.js + u-geometry.js + u-events.js + u-events-browser.js
desktop_light
not supported
tablet
u-sortable.js + u-dom.js + u-geometry.js + u-events.js + u-events-browser.js
tablet_light
u-sortable.js + u-dom.js + u-geometry.js + u-events.js + u-events-browser.js
smartphone
u-sortable.js + u-dom.js + u-geometry.js + u-events.js + u-events-browser.js
mobile
not supported
mobile_light
not supported
tv
not tested
seo
not supported