Create draggable object simple and easy with Metro 4.


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...

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>


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 class="cell-md-10 -drag-area">
                            <div style="width: 50px; height: 50px;"
                            function demoDragMoveEvent(el, pos){