<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Sortable - Connect lists</title> <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> .list { border: 1px solid #eee; width: 142px; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } .child { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } .nested { background: red; } </style> <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> <script> $( function() { $( ".connectedSortable" ).sortable({ connectWith: ".connectedSortable" }).disableSelection(); } ); </script> </head> <body> <div class="list connectedSortable"> <div class="ui-state-default child">Item 1</div> <div class="ui-state-default child">Item 2</div> <div class="connectedSortable nested"> <div class="ui-state-default child">Item 3</div> <div class="ui-state-default child">Item 4</div> </div> <div class="ui-state-default child">Item 5</div> </div> <ul class="list connectedSortable"> <li class="ui-state-highlight child">Item 1</li> <li class="ui-state-highlight child">Item 2</li> <li class="ui-state-highlight child">Item 3</li> <li class="ui-state-highlight child">Item 4</li> <li class="ui-state-highlight child">Item 5</li> </ul> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
