Draggable | jQuery UI (original) (raw)
Draggable
Allow elements to be moved using the mouse.
Examples
- Default functionality
- Auto-scroll
- Constrain movement
- Cursor style
- Events
- Handles
- jQuery UI Draggable + Sortable
- Revert position
- Snap to element or grid
- Visual feedback
Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
view source
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html lang="en"><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="" title="undefined" rel="noopener noreferrer">https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css"\> <link rel="stylesheet" href="/resources/demos/style.css"> #draggable { width: 150px; height: 150px; padding: 0.5em; } <script src="" title="undefined" rel="noopener noreferrer">https://code.jquery.com/jquery-3.7.1.js"\></script> <script src="" title="undefined" rel="noopener noreferrer">https://code.jquery.com/ui/1.14.1/jquery-ui.js"\></script> $( "#draggable" ).draggable();<div id="draggable" class="ui-widget-content"> |
|---|
Want to learn more about the draggable interaction? Check out theAPI documentation.