.add(element, [options]) method

Makes an element droppable.
This method adds it to the stack of droppable elements.
Can consider it a constructor of droppable elements, but where no Droppable object is returned.

The onHover, onDrop, and onDropOut options below can be:

• 'move', 'copy': Move or copy the draggable element into this droppable.


• 'revert': Make the draggable go back to where it came from.


• A function (draggableElement, droppableElement), defining what you want to do in this case.

Accepts

• element

  Target element

• options

  Options object

• options.hoverClass

  Classname(s) applied when an acceptable draggable element is hovering the element

• options.accept

  Selector for choosing draggables which can be dropped in this droppable.

• options.onHover

  Called when an acceptable element is hovering the droppable (see above for string options).

• options.onDrop

  Called when an acceptable element is dropped (see above for string options).

• options.onDropOut

  Called when a droppable is dropped outside this droppable (see above for string options).

Demo

Code

<p>Droppable box</p>
<ul class="droppable-1">
    <li class="ink-label blue">Draggable 1</li>
    <li class="ink-label green">Draggable 2</li>
    <li class="ink-label orange">Draggable 3</li>
</ul>

<p>Droppable box</p>
<ul class="droppable-2">
</ul>

<script type="text/javascript">
    Ink.requireModules(['Ink.UI.Draggable_1', 'Ink.UI.Droppable_1'], function (Draggable, Droppable) {
        draggableLiElements = Ink.ss('.droppable-1 li');
        new Draggable(draggableLiElements[0], {})
        new Draggable(draggableLiElements[1], {})
        new Draggable(draggableLiElements[2], {})
        Droppable.add('.droppable-1', {onDrop: 'move', onDropOut: 'revert'});
        Droppable.add('.droppable-2', {onDrop: 'move', onDropOut: 'revert'});
    })
</script>

.remove(el) method

Removes an element from the droppable stack and removes the droppable behavior

Accepts

• el

  Droppable element to disable.

.update(element) method

Updates location and size of droppable element

Accepts

• element

  Target element