<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="./style.css"> </head> <body> <div id="list1" class="list"> <div>Item 1.1 <div class="list n1"> <div>Item 2.1</div> <div>Item 2.2 <div class="list n2"> <div>Item 3.1</div> <div>Item 3.2</div> <div>Item 3.3</div> <div>Item 3.4</div> </div> </div> <div>Item 2.3</div> <div>Item 2.4</div> </div> </div> <div>Item 1.2</div> <div>Item 1.3</div> <div>Item 1.4 <div class="list n1"> <div>Item 2.1</div> <div>Item 2.2</div> <div>Item 2.3</div> <div>Item 2.4</div> </div> </div> <div>Item 1.5</div> </div> <style> .n1 > div { background-color: lightblue; } .n2 > div { background-color: lightgreen } .list { padding: 50px; } </style> <script src="../Sortable.js"></script> <script type="text/javascript"> var elements = document.getElementsByClassName('list'); for (var i = 0; i < elements.length; i++) { new Sortable(elements[i], { group: 'shared', invertSwap: true }); } </script> </body> </html>