new ng.Sortable (Object options) vs. 1.2.2 Full+Lite

The sortable plugins allow HTML elements to be sorted and nested under each other. This plugin supports the most common HTML elements out of the box.

Parameters

Object options vs. 1.2.2 Full+Lite
An optional object to hold the Accordion properties. The ng.Sortable class inherits the ng.PlugIn.options and all it's properties.

Examples

Basic Sortable
An example on how to create a basic sortable. This example uses the ng.UI and creates the sortable by class name (ng-sortable)
Demo:
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Sed commodo scelerisque nisl. Integer in ante vehicula,
  • vehicula tortor a, auctor quam.
  • Curabitur lectus magna, congue non ipsum sed, convallis lobortis justo.
  • Mauris vitae lacus a massa rutrum ullamcorper.
  • Nulla posuere eget quam eget rutrum.
  • Etiam non orci sit amet quam tempor porta.
  • Donec eu libero nisi. Vivamus vitae justo imperdiet,
  • euismod erat a, elementum nunc.
Multiple Drop Targets
This examples shows how to create multiple drop targets. This example uses JavaScript (HTML5 can be used too)
Demo:
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Sed commodo scelerisque nisl. Integer in ante vehicula,
  • vehicula tortor a, auctor quam.
  • Curabitur lectus magna, congue non ipsum sed, convallis lobortis justo.
  • Mauris vitae lacus a massa rutrum ullamcorper.
  • Nulla posuere eget quam eget rutrum.
  • Etiam non orci sit amet quam tempor porta.
  • Donec eu libero nisi. Vivamus vitae justo imperdiet,
  • euismod erat a, elementum nunc.

Inheritance Tree

This class inherits the following classes and all their methods and properties. It's recommended to check if any private properties/options are defined before using them. The complete list of inheritted methods and events are listed below the current object Custom Events.
ng.Events ()
ng.PlugIn (options)
ng.Sortable (options)

Methods

Function ng.Sortable.get_children_list (prnt, skip) vs. 1.2.2 Full+Lite
This method will return all the child sortable HTML elements (including different targets) from the parent HTML Element.
Function ng.Sortable.get_sort_elements (skip) vs. 1.2.2 Full+Lite
Get all the sortable HTML Elements (from all targets).
Function ng.Sortable.get_pre_element (elm) vs. 1.2.2 Full+Lite
Get the previous HTML Element with the same depth of the passed HTML Element.
Function ng.Sortable.get_next_element (elm) vs. 1.2.2 Full+Lite
Get the next HTML Element with the same depth as the passed HTML Element.
Function ng.Sortable.get_parent_element (elm) vs. 1.2.2 Full+Lite
Get the parent HTML Element of a nested sub HTML Element.
Function ng.Sortable.is_first_in_group (elm) vs. 1.2.2 Full+Lite
Check if the HTML Element is the first in it's parent tree with the same depth HTML Elements.
Function ng.Sortable.is_last_in_group (elm) vs. 1.2.2 Full+Lite
Check if the HTML Element is the last in it's parent tree with the same depth HTML Elements.
Function ng.Sortable.get_sub_list (elm) vs. 1.2.2 Full+Lite
Get a list of all the sub HTML Elements of the passed HTML Element. This list will include all the sub lists of the child elements as well.
Function ng.Sortable.add_drop_target (targets) vs. 1.2.2 Full+Lite
Add a new list of sortable as a drop target. Adding drop targets work in both directions automatically.
Function ng.Sortable.remove_drop_target (targets) vs. 1.2.2 Full+Lite
Remove a list of sortable objects from the targets drop list.
Function ng.Sortable.get_targets () vs. 1.2.2 Full+Lite
Get an HTML Elements ids array of the drop targets (including the sortable own target).
Function ng.Sortable.append_to_target (elm, target) vs. 1.2.2 Full+Lite
Appends the sortable elements to the top of a drop target.
Function ng.Sortable.move (elm, target, position, depth) vs. 1.2.2 Full+Lite
Move a sortable HTML Element above or below the target and set it's depth.
Function ng.Sortable.move_up (elm) vs. 1.2.2 Full+Lite
Move the element up one step.
Function ng.Sortable.move_down (elm) vs. 1.2.2 Full+Lite
Move the sortable HTML Element down one step.
Function ng.Sortable.indent (elm, depth) vs. 1.2.2 Full+Lite
Change the sortable HTML Element depth.
Function ng.Sortable.get_value (all_targets) vs. 1.2.2 Full+Lite
Gets an array (or object or arrays for all targets) with the Sortable Elements in order with all sorting values.
Function ng.Sortable.set_sort_var (sort_val) vs. 1.2.2 Full+Lite
Sets the sort_var option. If the sort_var is null, the Sortable.get_value will use the elements id.
Function ng.Sortable.get_sort_var () vs. 1.2.2 Full+Lite
Gets the sort_var option.
Function ng.Sortable.set_depth (depth) vs. 1.2.2 Full+Lite
Sets the maximum sort depth (the depth option value).
Function ng.Sortable.get_depth () vs. 1.2.2 Full+Lite
Gets the maximum depth of the elements.
Function ng.Sortable.can_sort (elm) vs. 1.2.2 Full+Lite
Check if the elements can be sorted. This method checks the can_sort option and if the object id disabled or not.
Function ng.Sortable.set_can_sort (cn_srt) vs. 1.2.2 Full+Lite
Set the can_sort option value.
Function ng.Sortable.get_can_sort () vs. 1.2.2 Full+Lite
Get the value of the can_sort option. The difference between this method and Sortable.can_sort is this method does not check for the disabled status.
Function ng.Sortable.disable () vs. 1.2.2 Full+Lite
Disables the Sortable object and adds a "disabled" class name to the HTML Element. This method fires the onDisable event.
Function ng.Sortable.enable () vs. 1.2.2 Full+Lite
Enables the Sortable object. This method fires the onEnable event.
Function ng.Sortable.is_disabled () vs. 1.2.2 Full+Lite
Checks if the Sortable object is disabled.
Function ng.Sortable.is_enabled () vs. 1.2.2 Full+Lite
Checks if the Sortable object is enabled.

Custom Events

In the events' functions, the this will refer to the class object.
Event onPreSort vs. 1.2.2 Full+Lite
First right before the sortable element is sorted or moved.
Event onAppend vs. 1.2.2 Full+Lite
Fires when the sortable element is appended to a new drop target using the Sortable. However, this event does not fire when the element is moved between targets elements.
Event onDrop vs. 1.2.2 Full+Lite
Fires when the user drops an element.
Event onMove vs. 1.2.2 Full+Lite
Fires when the element is moved between other sortable elements (through the same or different targets).
Event onIndent vs. 1.2.2 Full+Lite
Fires when the element depth is changed.
Event onDisable vs. 1.2.2 Full+Lite
Fires when the sortable object is disabled.
Event onEnable vs. 1.2.2 Full+Lite
Fires when the sortable object is enabled.

ng.Events () Methods

Some of these methods might be overriden by the inheriting class.
Function ng.Events.add_event (evt, func) vs. 1.1.0 Full+Lite
The add_event method will attach an event listener to an object. When the event is fired, the listeners functions will be executed on last added first run approach.
Function ng.Events.add_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.add_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.remove_event (evt, func) vs. 1.1.0 Full+Lite
Remove the function func from the event evt queue. When adding the event, you should add the function by reference. Anonymous functions cannot be removed.
Function ng.Events.remove_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.remove_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.clear_events (evt) vs. 1.1.0 Full+Lite
Remove all the functions under the event name evt.
Function ng.Events.clear_all_events () vs. 1.1.0 Full+Lite
This function works the same way Events.clear_events(evt) except it removes all the events attached to the object.
Function ng.Events.fire_event (evt_nm, args, evt) vs. 1.1.0 Full+Lite
Executes all the functions in the event evt_nm queue. Functions are executed in lasted added first exectued order.

ng.PlugIn (options) Methods

Some of these methods might be overriden by the inheriting class.
Function ng.PlugIn.get_position () vs. 1.1.0 Full+Lite
Get the plugin holding object position.
Function ng.PlugIn.get_width () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object width.
Function ng.PlugIn.get_heigh () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object height.
Function ng.PlugIn.set_object (obj) vs. 1.1.0 Full+Lite
Sets the ng.PlugIn holding HTML Element. The HTML Element should hold all the output and handles any events.
Function ng.PlugIn.get_object () vs. 1.1.0 Full+Lite
Gets the HTML Elements that holds the ng.PlugIn output.
Function ng.PlugIn.make_id (txt) vs. 1.1.0 Full+Lite
Creates a unique id for the ng.PlugIn object.
Function ng.PlugIn.get_id () vs. 1.1.0 Full+Lite
Get's the plugin ID.
Function ng.PlugIn.set_language (lang) vs. 1.1.0 Full+Lite
Sets the plugin language and reset the HTML Element direction based on the language.
Function ng.PlugIn.get_language () vs. 1.1.0 Full+Lite
Gets the plugin language.
Function ng.PlugIn.remove () vs. 1.1.0 Full+Lite
Removes the plugin and all it's properties. This method will also remove any HTML Elements that are associated with the plugin.
Function ng.PlugIn.create_options (options, default) vs. 1.1.2 Full+Lite
Create the initial options for the plugin. This method doesn not alter the plugin variables, but return an object that can be assigned to a variable in the plugin.
Function ng.PlugIn.create_events () vs. 1.1.2 Full+Lite
Create the plugin events from the customized option. This method should be called after ng.PlugIn.create_options.
Function ng.PlugIn.get (prop) vs. 1.2.2 Full+Lite
Gets the plugin property. This method will check if there is a getter function for the plugin and return it's value, otherwise it'll return the raw property. This method is useful for getting custom properties.
Function ng.PlugIn.set (prop, value) vs. 1.2.2 Full+Lite
Sets the plugin property. This method will check if there is a setter method for the plugin and call it. Otherwise, it will set the raw property value.This method is useful for setting custom properties.

ng.PlugIn (options) Custom Events

In the events' functions, the this will refer to the class object.
Event onBeforeRemove vs. 1.2.2 Full+Lite
This event will fire right before the plugin (or any object that inherit it, e.g. components) is removed.