jQuery UI Sortable appendTo Option
The Sortable widget appendTo option is used to append the elements when the sortable elements are dragged with mouse.
Syntax:
$( ".selector" ).sortable({
appendTo: document.body
});Approach: First, add jQuery UI scripts needed for your project.
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Example:
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #sortable { list-style-type: none; width: 50%; } #sortable li { margin: 10px 0; padding: 0.5em; font-size: 25px; height: 20px; } </style> <script> $(function () { $("#sortable").sortable({ appendTo: document.body }); }); </script></head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <h4>jQuery UI Sortable Widget appendTo Option</h4> <ul id="sortable"> <li class="ui-state-default">BCD</li> <li class="ui-state-default">CAB</li> <li class="ui-state-default">BAC</li> <li class="ui-state-default">BCA</li> <li class="ui-state-default">ABC</li> </ul> </center></body> </html> |
Output:
Please Login to comment...