draggable
Mark a html element as draggable.
The draggable tag is used in conjunction with the {% droppable %} tag to implement drag & drop. Elements that are marked as draggable can be dropped on elements marked as droppable. Drag & drop generates dragdrop events that are sent to the controller or the delegate.
For example:
<div id="drag1">Drag me</div>
{% draggable id="drag1" tag="drag-one" %}
Now the div with id “drag1” can be dragged. When it is dropped then event/2 of the controller or delegate Erlang module is called signaling the drag (and also the drop to the module receiving the droppable events):
event({drag, Drag, Drop}, Context).
Where both Drag and Drop are #dragdrop records:
-record(dragdrop, {tag, delegate, id}).
The draggable tag accepts the following arguments:
| Argument | Description | Example |
|---|---|---|
| id | The id of the element that becomes draggable. | id=”drag1” |
| tag | The tag of the draggable that is sent as part of the drag and drop events. This can be any value, including a tuple. | tag={subject_list id=42 changed=false} |
| clone | Clone the element when dragging or drag the element itself. Defaults to false. | clone=true |
| revert | When the element has to revert to its starting position. Defaults to “invalid”, i.e. when the drop was above an invalid position. Other options are true, false and “valid”. | revert=false |
| axis | Constrain the drag movement to either the x or y direction. Normally the drag is not constrained. Acceptable values are “x” or “y” axis=”x” | |
| handle | The css selector that is the handle to drag with. Defaults to the whole element. | handle=”handleclass” |
| group | The name of this drag group, for use in the droppable element’s “accept” argument. Multiple groups are allowed. | group=”edges” |
| opacity | Change the opacity while dragging. Defaults to “0.8”. | opacity=”0.5” |
| delegate | The Erlang module that will receive the drag event after a successful drop. |