metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Create draggable object simple and easy with Metro 4. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Draggable - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Draggable</a></li> <li class="toc-entry"><a href="#_draggable_setup">Setup</a></li> <li class="toc-entry"><a href="#_draggable_element">Drag element</a></li> <li class="toc-entry"><a href="#_draggable_area">Drag Area</a></li> <li class="toc-entry"><a href="#_draggable_events">Events</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Draggable</h1> <p class="text-leader"> Create draggable object simple and easy with Metro 4. </p>  <h3 id="_draggable_setup">Setup</h3> <p> To set element as draggable add attribute <code>data-role="draggable"</code>. </p> <div class="example" style="height: 300px "> <div style="width: 100px; height: 100px;" class="bg-cyan" data-role="draggable"></div> </div> <pre><code class="html"> <div data-role="draggable"></div> </code></pre> <h3 id="_draggable_element">Drag element</h3> <p> You can define sub element as drag marker. To set element as drag marker add attribute <code>data-drag-element=*</code> and set value to required sub element. </p> <div class="example" style="height: 300px "> <div data-role="draggable" data-drag-element=".drag-element" style="width: 200px"> <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. All parallel therapists handle each other, only unbiased explosion. </div> </div> </div> <pre><code class="html"> <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> </code></pre> <h3 id="_draggable_area">Drag area</h3> <p> By default, the item is restricted to move by its parent. You can set set drag area with <code>data-drag-area</code> attribute. </p> <div class="example" style="height: 300px "> <div style="width: 100px; height: 100px;" class="bg-cyan" data-role="draggable" data-drag-area="body"></div> </div> <pre><code class="html"> <div data-role="draggable" data-drag-area="body"></div> </code></pre>  <h3 id="_draggable_events">Events</h3> <p> You can define next events with draggable element: </p> <table class="table striped"> <thead> <tr> <th>Event</th> <th>Attribute</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>onDragStart(position, el)</code></td> <td><code>data-on-drag-start</code></td> <td>Fired when dragging is started</td> </tr> <tr> <td><code>onDragStop(position, el)</code></td> <td><code>data-on-drag-stop</code></td> <td>Fired when dragging is stopped</td> </tr> <tr> <td><code>onDragMove(position, el)</code></td> <td><code>data-on-drag-move</code></td> <td>Fired when element is moving</td> </tr> </tbody> </table> <div class="example"> <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" style="height: 200px;"> <div style="width: 50px; height: 50px;" class="bg-cyan" data-role="draggable" data-on-drag-move="demoDragMoveEvent"></div> </div> <script> function demoDragMoveEvent(pos, el){ $('#-pos-x').text(pos.x); $('#-pos-y').text(pos.y); } </script> </div> </div> <pre><code class="html"> <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> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>