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>