Draggable
Create draggable object simple and easy with Metro UI.
Setup
To set element as draggable add attribute data-role="draggable"
.
<div data-role="draggable"></div>
Drag element
You can define sub element as drag marker. To set element as drag marker add attribute data-drag-element=*
and set value to required sub element.
Panel title
Bursas sunt fidess de peritus verpa. All parallel therapists handle each other, only unbiased explosion.
<div data-role="draggable"
data-drag-element=".drag-element" class="w-25">
<div class="bg-cyan fg-white p-2 drag-element">Panel title</div>
<div class="border bd-cyan p-2">
Bursas sunt fidess de peritus verpa...
</div>
</div>
Drag area
By default, the item is restricted to move by its parent. You can set set drag area with data-drag-area
attribute.
<div data-role="draggable" data-drag-area="body"></div>
Events
You can define next events with draggable element:
Event | Attribute | Desc |
---|---|---|
onDragStart(position, el) |
data-on-drag-start |
Fired when dragging is started |
onDragStop(position, el) |
data-on-drag-stop |
Fired when dragging is stopped |
onDragMove(position, el) |
data-on-drag-move |
Fired when element is moving |
X: 0
Y: 0
<div class="row">
<div class="cell-md-2">
<p>X: <span id="-pos-x">0</span></p>
<p>Y: <span id="-pos-y">0</span></p>
</div>
<div class="cell-md-10 -drag-area">
<div style="width: 50px; height: 50px;"
class="bg-cyan"
data-role="draggable"
data-on-drag-move="demoDragMoveEvent"></div>
</div>
<script>
function demoDragMoveEvent(el, pos){
$('#-pos-x').text(pos.x);
$('#-pos-y').text(pos.y);
}
</script>
</div>