Class: ListDragon

ListDragon

new ListDragon(selectorOrModelLists, optionsopt, cssStylesheetReferenceElementopt)

This object services a set of item lists that allow dragging and dropping items within and between lists in a set.

Two strategies are supported:

  1. Supply your own HTML markup and let the API build the item models for you. To use this strategy, script your HTML and provide one of these:
    • an array of all the list item (<li>) tags
    • a CSS selector that points to all the list item tags
  2. Supply your own item models and let the API build the HTML markup for you. To use this strategy, provide an array of model lists.

The new ListDragon object's modelLists property references the array of model lists the API constructed for you in strategy #1 or the array of model lists you supplied for strategy #2.

After the user performs a successful drag-and-drop operation, the position of the model references within the modelLists array is rearranged. (The models themselves are the original objects as supplied in the model lists; they are not rebuilt or altered in any way. Just the references to them are moved around.)

Parameters:
Name Type Attributes Default Description
selectorOrModelLists string | Array.<Element> | Array.<modelListType>

You must supply one of the items in bold below:

  1. For strategy #1 above (API creates models from supplied elements): All the list item (<li>) DOM elements of all the lists you want the new object to manage, as either:
    1. A CSS selector; or
    2. An array of DOM elements
  2. For strategy #2 above (API creates elements from supplied models): An array of model lists, each of which is in one of the following forms:
    1. An array of item models (with various option properties hanging off of it); and/or
    2. A modelListType object with those same various option properties including the required models property containing that same array of item models.

In either case (2.1 or 2.2), each element of such arrays of item models may take the form of:

  • A string primitive; or
  • A itemModelType object with a various option properties including the required label property containing a string primitive.

Regarding these string primitives, each is either:

  • A string to be displayed in the list item; or
  • A format string with other property values merged in, the result of which is to be displayed in the list item.
options object <optional>
 {}

You may supply "global" template variables here, representing the "outer scope," after first searching each model and then each model list.
cssStylesheetReferenceElement undefined | null | Element | string <optional>

Determines where to insert the stylesheet. (This is the only formal option.) Passed to css-injector, the overloads are (from css-injector docs):

  • undefined type (or omitted): injects stylesheet at top of <head>...</head> element
  • null value: injects stylesheet at bottom of <head>...</head> element
  • Element type: injects stylesheet immediately before given element, wherever it is found.
  • string type: injects stylesheet immediately before given first element found that matches the given css selector.

ListDragon

new ListDragon(selectorOrModelLists, optionsopt, cssStylesheetReferenceElementopt)

This object services a set of item lists that allow dragging and dropping items within and between lists in a set.

Two strategies are supported:

  1. Supply your own HTML markup and let the API build the item models for you. To use this strategy, script your HTML and provide one of these:
    • an array of all the list item (<li>) tags
    • a CSS selector that points to all the list item tags
  2. Supply your own item models and let the API build the HTML markup for you. To use this strategy, provide an array of model lists.

The new ListDragon object's modelLists property references the array of model lists the API constructed for you in strategy #1 or the array of model lists you supplied for strategy #2.

After the user performs a successful drag-and-drop operation, the position of the model references within the modelLists array is rearranged. (The models themselves are the original objects as supplied in the model lists; they are not rebuilt or altered in any way. Just the references to them are moved around.)

Parameters:
Name Type Attributes Default Description
selectorOrModelLists string | Array.<Element> | Array.<modelListType>

You must supply one of the items in bold below:

  1. For strategy #1 above (API creates models from supplied elements): All the list item (<li>) DOM elements of all the lists you want the new object to manage, as either:
    1. A CSS selector; or
    2. An array of DOM elements
  2. For strategy #2 above (API creates elements from supplied models): An array of model lists, each of which is in one of the following forms:
    1. An array of item models (with various option properties hanging off of it); and/or
    2. A modelListType object with those same various option properties including the required models property containing that same array of item models.

In either case (2.1 or 2.2), each element of such arrays of item models may take the form of:

  • A string primitive; or
  • A itemModelType object with a various option properties including the required label property containing a string primitive.

Regarding these string primitives, each is either:

  • A string to be displayed in the list item; or
  • A format string with other property values merged in, the result of which is to be displayed in the list item.
options object <optional>
 {}

You may supply "global" template variables here, representing the "outer scope," after first searching each model and then each model list.
cssStylesheetReferenceElement undefined | null | Element | string <optional>

Determines where to insert the stylesheet. (This is the only formal option.) Passed to css-injector, the overloads are (from css-injector docs):

  • undefined type (or omitted): injects stylesheet at top of <head>...</head> element
  • null value: injects stylesheet at bottom of <head>...</head> element
  • Element type: injects stylesheet immediately before given element, wherever it is found.
  • string type: injects stylesheet immediately before given first element found that matches the given css selector.