DRAGON overview

Basic terms definitions

• drag - is an instance of class Drag which is object referencing the drag action, it is the fundamental class of the library.
• item - is an instance of class Item which is object holding reference to related dom element and additional data
• container - is an instance of class Container which is object holding reference to its items, related dom element and additional data. It contains items.
• dragon - is an instance of class Dragon we can imagine it as group of containers sharing same configuration
• space - is an object holding references of multiple dragons which can interfere, it is kind of dragons group

Bootstraping dragon

Basicaly you bootstrap dragons by calling dragon function of a library which inside creates new Dragon instance and returns it. You are not supposed to create dragon instances directly because Dragon needs some extra parameters which is intended for advanced use and it is not described here in overview section.

The dragon function accepts one parameter, which can be configuration object, array of container ( elements ), or one container element. It also accepts array-like objects such as jQuery elements collection etc.

dragon({ containers: [ containerElm1, cotainerElm2 ]})

dragon([ containerElm1, cotainerElm2 ])

dragon( containerElm1 )

dragon( $('#containerElm1'))

Drag & drop

• grab
• drag start
• drag
• release
• drop

Grab

By default grab occurs when user performs mouse down ( touch start ) on item element. Dragon travel trough the ancestors of the elemenent looking for registered container element. If found one, it will trigger grab method on relevant container object.

Container grab method by default just search for relevant item object and call grab method on it. The item then create new instance of Drag class. From now, drag is ready to be activated by move.

Drag start

By default drag is activated by mouse ( touch ) movement. This movement starts drag start procedure wich initialize drag instace for being dragged. From now the item is moving according to mouse move ( touch move ).

Drag

During the drag elements behind cursor ( touch position ), are checked if there is no container ready to accept dragged item. If found one, it will move item element into it.