Global

Methods

createListElementsFromModelLists(modelLists)

Creates <ul>...</ul> elements and inserts them into an element property on each model.

Parameters:
Name Type Description
modelLists object
Returns:

modelLists

createListElementsFromModelLists(modelLists)

Creates <ul>...</ul> elements and inserts them into an element property on each model.

Parameters:
Name Type Description
modelLists object
Returns:

modelLists

createModelListsFromListElements(listItemElements) → {Array}

Create a .modelLists array with these

  • elements' parent
      elements

    • Parameters:
    Name Type Description
    listItemElements Array.<Element>
    Returns:
    Type
    Array

    createModelListsFromListElements(listItemElements) → {Array}

    Create a .modelLists array with these

  • elements' parent
      elements

    • Parameters:
    Name Type Description
    listItemElements Array.<Element>
    Returns:
    Type
    Array

    Type Definitions

    itemModelType

    Data model for a drag-and-drop list item.

    These "models" are typically just string primitives. Alternatively, you can supply your own object so long as it has a label property to hold the string. If you need to include the htmlEncode property then you have no choice; you must make it an object.

    The models are not altered or rebuilt by the constructor nor by a successful drag-and-drop operation.

    Type:
    • string | object
    Properties:
    Name Type Attributes Description
    label string <optional>

    The string to display in the list item. If omitted, defaults to the value of the modelListType array's label property.

    Alternatively, the label string may be a template incorporating {...}-style data merge flags. These will be replaced with the values of the properties so named. For example, the following model object ...

    var template = '<b>#{jersey}</b> - ' +
    '{lastName}, {firstName} ' +
    '<i>{position}</i>';

var model = {
    label: template,
    firstName: 'Graham',
    lastName: 'Zusi',
    jersey: 10,
    position: 'Midfielder'
}

    ... produces a list item that looks something like this:

    #10 - Graham Zusi, Midfielder
    htmlEncode boolean <optional>

    If truthy, encode the string. If omitted, inherit value from the property with the same name hanging off of the containing modelListType array.

    modelListType

    List of models representing a <ul>...</ul> element to be generated.

    This list can be supplied to the ListDragon constructor and ListDragon will generate the HTML for you.

    Because JavaScript array literal syntax does not accommodate additional properties, you may specify an object rather than an array and include a models property (see below) to hold the actual model list array.

    This object will be mutated by the constructor as follows:

    1. If this is an object (rather than an array, as discussed above), the constructor converts it to an array with additional properties.
    2. The constructor adds in the container and element.

    If the itemModelType.htmlEncode property is true, the string is encoded first so that it can display markup; otherwise any markup in the string is interpreted by the browser.

    Examples:

    Simplest:

     var set = [
     [ // list 1: fruits
         'apple',
         'orange',
         'banana'
     ],
     [ // list 2: vegetables
         'lettuce',
         'tomato',
         'cucumber'
     ]
 ];

    If you want to specify other options, such as title, you could do this:

     var list1 = [
         'apple',
         'orange',
         'banana'
     ];
 list1.title = 'Fruits';

 var list 2 = [
     'lettuce',
     'tomato',
     'cucumber'
 ];
 list2.title = 'Vegitables';

 var set = [
     list1,
     list2
 ];

    Or you could keep it all in a single literal by giving an array of objects with models attributes (in the following the less-than and greater-than signs are rendered):

     var set = [
     {   // list 1
         title: 'Fruits',
         models:  [
             'apple',
             'orange',
             'banana'
         ]
     },
     {   // list 2
         title: 'Vegetables',
         models: [
             {
                 label: '<lettuce>',
                 htmlEncode: true
             },
             { label: 'tomato' },
             'cucumber'
         ]
     }
 ];

    Note how list 2 in the above example shows how you can supply objects rather than string primitives. This allows you to give additional options.

    Type:
    Properties:
    Name Type Attributes Default Description
    models Array.<itemModelType>

    The model list array (when this is an object). Only include this property if this is an object and not an array.
    isDropTarget boolean | function <optional>
    		 true

    Enables the list as a target for dropping list items. If a function, it is called on every 'mousedown' event with this as the modelListType object; it should return a boolean.
    title string <optional>

    Wraps generated <ul>...</ul> element in a <div>...</div> element and prepends a <div>...</div> for the title.
    htmlEncode boolean <optional>
    		 options.htmlEncode

    Encode the title and all model labels (unless models[*].hmtlEncode is defined as falsey).
    cssClassNames string <optional>
    		 options.cssClassNames

    CSS class name for container <div>...<div> element (when there is a title) or <ul>...</ul> element (when there is not).
    label string <optional>

    Default list item contents when list item is a model with no label property of its own. Not especially useful unless a template. (See itemModelType for details.)
    container Element

    A new <div>...</div> element ready for DOM insertion. It contains a nested <div>...</div> for the header (when title given) and a nested <ul>...</ul> for the drag-and-drop item list. Do not specify this property yourself; it is added automatically by the ListDragon constructor.
    element Element

    The <ul>...</ul> element nested within the containing <div>...</div> element. Do not specify this property yourself; it is added automatically by the ListDragon constructor.