API Preview tool | The Dojo Toolkit

dojo/dnd/Container.js

Provides:
- dojo.dnd.Container
dojo.dnd.__ContainerArgs
- type
```
Function
```
- summary
dojo.dnd.__ContainerArgs.creator
- type
```
Function
```
- source: [view]
    // summary:
    //  a creator function, which takes a data item, and returns an object like that:
    //  {node: newNode, data: usedData, type: arrayOfStrings}
- summary
```
a creator function, which takes a data item, and returns an object like that:
{node: newNode, data: usedData, type: arrayOfStrings}
```

dojo.dnd.__ContainerArgs.skipForm

type
```
Boolean
```

summary

don't start the drag operation, if clicked on form elements

dojo.dnd.__ContainerArgs.dropParent

type
```
Node||String
```

summary

node or node's id to use as the parent node for dropped items
(must be underneath the 'node' parameter in the DOM)

dojo.dnd.__ContainerArgs._skipStartup

type
```
Boolean
```

summary

skip startup(), which collects children, for deferred initialization
(this is used in the markup mode)

dojo.dnd.Container
- type
```
Function
```
- summary
```
a constructor of the Container
```
- parameters:
  - node: (typeof Node)
```
node or node's id to build the container on
```
  - params: (typeof dojo.dnd.__ContainerArgs)
```
a dictionary of parameters
```
- source: [view]
    this.node = dojo.byId(node);
    if(!params){ params = {}; }
    this.creator = params.creator || null;
    this.skipForm = params.skipForm;
    this.parent = params.dropParent && dojo.byId(params.dropParent);
  
  
    // class-specific variables
    this.map = {};
    this.current = null;
  
    // states
    this.containerState = "";
    dojo.addClass(this.node, "dojoDndContainer");
  
  
    // mark up children
    if(!(params && params._skipStartup)){
     this.startup();
    }
  
    // set up events
    this.events = [
     dojo.connect(this.node, "onmouseover", this, "onMouseOver"),
     dojo.connect(this.node, "onmouseout", this, "onMouseOut"),
     // cancel text selection and text dragging
     dojo.connect(this.node, "ondragstart", this, "onSelectStart"),
     dojo.connect(this.node, "onselectstart", this, "onSelectStart")
    ];
dojo.dnd.Container.skipForm
- summary

dojo.dnd.Container.current

type
```
DomNode
```

summary

The DOM node the mouse is currently hovered over

dojo.dnd.Container.map
- type
```
Object
```
- summary
dojo.dnd.Container.creator
- type
```
Function
```
- source: [view]
  // summary:
  // creator function, dummy at the moment
- summary
```
creator function, dummy at the moment
```
dojo.dnd.Container.getItem
- type
```
Function
```
- parameters:
  - key: (typeof String)
- source: [view]
  return this.map[key]; // dojo.dnd.Item
- summary
```
returns a data item by its key (id)
```
- returns
```
dojo.dnd.Item
```
dojo.dnd.Container.setItem
- type
```
Function
```
- parameters:
  - key: (typeof String)
  - data: (typeof dojo.dnd.Item)
- source: [view]
  this.map[key] = data;
- summary
```
associates a data item with its key (id)
```
dojo.dnd.Container.delItem
- type
```
Function
```
- parameters:
  - key: (typeof String)
- source: [view]
  delete this.map[key];
- summary
```
removes a data item from the map by its key (id)
```
dojo.dnd.Container.forInItems
- type
```
Function
```
- parameters:
  - f: (typeof Function)
  - o: (typeof Object)
- source: [view]
    o = o || dojo.global;
    var m = this.map, e = dojo.dnd._empty;
    for(var i in m){
     if(i in e){ continue; }
     f.call(o, m[i], i, this);
    }
    return o; // Object
- summary
```
iterates over a data map skipping members that
are present in the empty object (IE and/or 3rd-party libraries).
```
- returns
```
Object
```
dojo.dnd.Container.clearItems
- type
```
Function
```
- source: [view]
  this.map = {};
- summary
```
removes all data items from the map
```
dojo.dnd.Container.getAllNodes
- type
```
Function
```
- source: [view]
  return dojo.query("> .dojoDndItem", this.parent); // NodeList
- summary
```
returns a list (an array) of all valid child nodes
```
- returns
```
NodeList
```
dojo.dnd.Container.sync
- type
```
Function
```
- source: [view]
    var map = {};
    this.getAllNodes().forEach(function(node){
     if(node.id){
      var item = this.getItem(node.id);
      if(item){
       map[node.id] = item;
       return;
      }
     }else{
      node.id = dojo.dnd.getUniqueId();
     }
     var type = node.getAttribute("dndType"),
      data = node.getAttribute("dndData");
     map[node.id] = {
      data: data || node.innerHTML,
      type: type ? type.split(/\s*,\s*/) : ["text"]
     };
    }, this);
    this.map = map;
    return this; // self
- summary
```
sync up the node list with the data map
```
- returns
```
self
```
dojo.dnd.Container.insertNodes
- type
```
Function
```
- parameters:
  - data: (typeof Array)
```
a list of data items, which should be processed by the creator function
```
  - before: (typeof Boolean)
```
insert before the anchor, if true, and after the anchor otherwise
```
  - anchor: (typeof Node)
```
the anchor node to be used as a point of insertion
```
- source: [view]
    if(!this.parent.firstChild){
     anchor = null;
    }else if(before){
     if(!anchor){
      anchor = this.parent.firstChild;
     }
    }else{
     if(anchor){
      anchor = anchor.nextSibling;
     }
    }
    if(anchor){
     for(var i = 0; i < data.length; ++i){
      var t = this._normalizedCreator(data[i]);
      this.setItem(t.node.id, {data: t.data, type: t.type});
      this.parent.insertBefore(t.node, anchor);
     }
    }else{
     for(var i = 0; i < data.length; ++i){
      var t = this._normalizedCreator(data[i]);
      this.setItem(t.node.id, {data: t.data, type: t.type});
      this.parent.appendChild(t.node);
     }
    }
    return this; // self
- summary
```
inserts an array of new nodes before/after an anchor node
```
- returns
```
self
```
dojo.dnd.Container.destroy
- type
```
Function
```
- source: [view]
    dojo.forEach(this.events, dojo.disconnect);
    this.clearItems();
    this.node = this.parent = this.current = null;
- summary
```
prepares this object to be garbage-collected
```
dojo.dnd.Container.markupFactory
- type
```
Function
```
- parameters:
  - params: (typeof )
  - node: (typeof )
- source: [view]
  params._skipStartup = true;
  return new dojo.dnd.Container(node, params);
- summary
dojo.dnd.Container.startup
- type
```
Function
```
- source: [view]
    if(!this.parent){
     // use the standard algorithm, if not assigned
     this.parent = this.node;
     if(this.parent.tagName.toLowerCase() == "table"){
      var c = this.parent.getElementsByTagName("tbody");
      if(c && c.length){ this.parent = c[0]; }
     }
    }
    this.defaultCreator = dojo.dnd._defaultCreator(this.parent);
  
    // process specially marked children
    this.sync();
- summary
```
collects valid child items and populate the map

set up the real parent node
```
dojo.dnd.Container.onMouseOver
- type
```
Function
```
- parameters:
  - e: (typeof Event)
```
mouse event
```
- source: [view]
    var n = e.relatedTarget;
    while(n){
     if(n == this.node){ break; }
     try{
      n = n.parentNode;
     }catch(x){
      n = null;
     }
    }
    if(!n){
     this._changeState("Container", "Over");
     this.onOverEvent();
    }
    n = this._getChildByEvent(e);
    if(this.current == n){ return; }
    if(this.current){ this._removeItemClass(this.current, "Over"); }
    if(n){ this._addItemClass(n, "Over"); }
    this.current = n;
- summary
```
event processor for onmouseover
```
dojo.dnd.Container.onMouseOut
- type
```
Function
```
- parameters:
  - e: (typeof Event)
```
mouse event
```
- source: [view]
    for(var n = e.relatedTarget; n;){
     if(n == this.node){ return; }
     try{
      n = n.parentNode;
     }catch(x){
      n = null;
     }
    }
    if(this.current){
     this._removeItemClass(this.current, "Over");
     this.current = null;
    }
    this._changeState("Container", "");
    this.onOutEvent();
- summary
```
event processor for onmouseout
```
dojo.dnd.Container.onSelectStart
- type
```
Function
```
- parameters:
  - e: (typeof Event)
```
mouse event
```
- source: [view]
    if(!this.skipForm || !dojo.dnd.isFormElement(e)){
     dojo.stopEvent(e);
    }
- summary
```
event processor for onselectevent and ondragevent
```
dojo.dnd.Container.onOverEvent
- type
```
Function
```
- source: [view]
  // summary:
  // this function is called once, when mouse is over our container
- summary
```
this function is called once, when mouse is over our container
```
dojo.dnd.Container.onOutEvent
- type
```
Function
```
- source: [view]
  // summary:
  // this function is called once, when mouse is out of our container
- summary
```
this function is called once, when mouse is out of our container
```
dojo.dnd.Container._changeState
- type
```
Function
```
- parameters:
  - type: (typeof String)
```
a name of the state to change
```
  - newState: (typeof String)
```
new state
```
- source: [view]
    var prefix = "dojoDnd" + type;
    var state = type.toLowerCase() + "State";
    //dojo.replaceClass(this.node, prefix + newState, prefix + this[state]);
    dojo.replaceClass(this.node, prefix + newState, prefix + this[state]);
    this[state] = newState;
- summary
```
changes a named state to new state value
```
dojo.dnd.Container._addItemClass
- type
```
Function
```
- parameters:
  - node: (typeof Node)
```
a node
```
  - type: (typeof String)
```
a variable suffix for a class name
```
- source: [view]
  dojo.addClass(node, "dojoDndItem" + type);
- summary
```
adds a class with prefix &quot;dojoDndItem&quot;
```
dojo.dnd.Container._removeItemClass
- type
```
Function
```
- parameters:
  - node: (typeof Node)
```
a node
```
  - type: (typeof String)
```
a variable suffix for a class name
```
- source: [view]
  dojo.removeClass(node, "dojoDndItem" + type);
- summary
```
removes a class with prefix &quot;dojoDndItem&quot;
```
dojo.dnd.Container._getChildByEvent
- type
```
Function
```
- parameters:
  - e: (typeof Event)
```
a mouse event
```
- source: [view]
    var node = e.target;
    if(node){
     for(var parent = node.parentNode; parent; node = parent, parent = node.parentNode){
      if(parent == this.parent && dojo.hasClass(node, "dojoDndItem")){ return node; }
     }
    }
    return null;
- summary
```
gets a child, which is under the mouse at the moment, or null
```
dojo.dnd.Container._normalizedCreator
- type
```
Function
```
- parameters:
  - item: (typeof dojo.dnd.Item)
  - hint: (typeof String)
- source: [view]
    var t = (this.creator || this.defaultCreator).call(this, item, hint);
    if(!dojo.isArray(t.type)){ t.type = ["text"]; }
    if(!t.node.id){ t.node.id = dojo.dnd.getUniqueId(); }
    dojo.addClass(t.node, "dojoDndItem");
    return t;
- summary
```
adds all necessary data to the output of the user-supplied creator function
```

dojo.dnd.Container.node

type
```
Node
```

summary

node or node's id to build the container on

dojo.dnd.Container.parent
- summary
dojo.dnd.Container.defaultCreator
- summary
dojo.dnd.Container.containerState
- summary
dojo.dnd.Container.events
- summary
dojo.dnd._defaultCreatorNodes
- type
```
Object
```
- summary
dojo.dnd._defaultCreatorNodes.ul
- summary
dojo.dnd._defaultCreatorNodes.ol
- summary
dojo.dnd._defaultCreatorNodes.div
- summary
dojo.dnd._defaultCreatorNodes.p
- summary

dojo.dnd.Item

type
```
Function
```
source: [view]
this.type = type;
this.data = data;

summary

Represents (one of) the source node(s) being dragged.
Contains (at least) the &quot;type&quot; and &quot;data&quot; attributes.

dojo.dnd.Item.type

type
```
String[
```

summary

Type(s) of this item, by default this is [&quot;text&quot;]

dojo.dnd.Item.data

type
```
Object
```

summary

Logical representation of the object being dragged.
If the drag object's type is &quot;text&quot; then data is a String,
if it's another type then data could be a different Object,
perhaps a name/value hash.

dojo.dnd._createNode
- type
```
Function
```
- parameters:
  - tag: (typeof String)
```
a tag name or empty for SPAN
```
- source: [view]
  if(!tag){ return dojo.dnd._createSpan; }
  return function(text){ // Function
  return dojo.create(tag, {innerHTML: text}); // Node
  };
- summary
```
returns a function, which creates an element of given tag
(SPAN by default) and sets its innerHTML to given text
```
- returns
```
Function|Node
```
dojo.dnd._createTrTd
- type
```
Function
```
- parameters:
  - text: (typeof String)
```
a text for TD
```
- source: [view]
  var tr = dojo.create("tr");
  dojo.create("td", {innerHTML: text}, tr);
  return tr; // Node
- summary
```
creates a TR/TD structure with given text as an innerHTML of TD
```
- returns
```
Node
```
dojo.dnd._createSpan
- type
```
Function
```
- parameters:
  - text: (typeof String)
```
a text for SPAN
```
- source: [view]
  return dojo.create("span", {innerHTML: text}); // Node
- summary
```
creates a SPAN element with given text as its innerHTML
```
- returns
```
Node
```
dojo.dnd._defaultCreator
- type
```
Function
```
- parameters:
  - node: (typeof Node)
```
a container node
```
- source: [view]
  var tag = node.tagName.toLowerCase();
  var c = tag == "tbody" || tag == "thead" ? dojo.dnd._createTrTd :
     dojo.dnd._createNode(dojo.dnd._defaultCreatorNodes[tag]);
  return function(item, hint){ // Function
    var isObj = item && dojo.isObject(item), data, type, n;
    if(isObj && item.tagName && item.nodeType && item.getAttribute){
     // process a DOM node
     data = item.getAttribute("dndData") || item.innerHTML;
     type = item.getAttribute("dndType");
     type = type ? type.split(/\s*,\s*/) : ["text"];
     n = item; // this node is going to be moved rather than copied
    }else{
     // process a DnD item object or a string
     data = (isObj && item.data) ? item.data : item;
     type = (isObj && item.type) ? item.type : ["text"];
     n = (hint == "avatar" ? dojo.dnd._createSpan : c)(String(data));
    }
    if(!n.id){
     n.id = dojo.dnd.getUniqueId();
    }
    return {node: n, data: data, type: type};
  };
- summary
```
takes a parent node, and returns an appropriate creator function
```
- returns
```
Function
```
dojo.dnd
- type
```
Object
```
- summary
dojo
- type
```
Object
```
- summary

dojo/dnd/Container.js

Provides:

dojo.dnd.__ContainerArgs

dojo.dnd.__ContainerArgs.creator

dojo.dnd.__ContainerArgs.skipForm

dojo.dnd.__ContainerArgs.dropParent

dojo.dnd.__ContainerArgs._skipStartup

dojo.dnd.Container

dojo.dnd.Container.skipForm

dojo.dnd.Container.current

dojo.dnd.Container.map

dojo.dnd.Container.creator

dojo.dnd.Container.getItem

dojo.dnd.Container.setItem

dojo.dnd.Container.delItem

dojo.dnd.Container.forInItems

dojo.dnd.Container.clearItems

dojo.dnd.Container.getAllNodes

dojo.dnd.Container.sync

dojo.dnd.Container.insertNodes

dojo.dnd.Container.destroy

dojo.dnd.Container.markupFactory

dojo.dnd.Container.startup

dojo.dnd.Container.onMouseOver

dojo.dnd.Container.onMouseOut

dojo.dnd.Container.onSelectStart

dojo.dnd.Container.onOverEvent

dojo.dnd.Container.onOutEvent

dojo.dnd.Container._changeState

dojo.dnd.Container._addItemClass

dojo.dnd.Container._removeItemClass

dojo.dnd.Container._getChildByEvent

dojo.dnd.Container._normalizedCreator

dojo.dnd.Container.node

dojo.dnd.Container.parent

dojo.dnd.Container.defaultCreator

dojo.dnd.Container.containerState

dojo.dnd.Container.events

dojo.dnd._defaultCreatorNodes

dojo.dnd._defaultCreatorNodes.ul

dojo.dnd._defaultCreatorNodes.ol

dojo.dnd._defaultCreatorNodes.div

dojo.dnd._defaultCreatorNodes.p

dojo.dnd.Item

dojo.dnd.Item.type

dojo.dnd.Item.data

dojo.dnd._createNode

dojo.dnd._createTrTd

dojo.dnd._createSpan

dojo.dnd._defaultCreator

dojo.dnd

dojo