<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <ol class="nested_with_switch vertical"> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 <ol> <li>Item 3.1</li> <li>Item 3.2</li> <li>Item 3.3</li> <li>Item 3.4</li> <li>Item 3.5</li> <li>Item 3.6</li> </ol> </li> <li> Item 5 </li> <li> Item 6 </li> </ol> </div> <script type="application/javascript" src="http://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script> </div>

body.dragging, body.dragging * { cursor: move !important; } .dragged { position: absolute; opacity: 0.5; z-index: 2000; } ol.example li.placeholder { position: relative; /** More li styles **/ } ol.example li.placeholder:before { position: absolute; /** Define arrowhead **/ } ol.nested_with_switch li, ol.simple_with_animation li, ol.serialization li, ol.default li { cursor: pointer; } ol.vertical li { display: block; margin: 5px; padding: 5px; border: 1px solid #CCC; color: #08C; background: none repeat scroll 0% 0% #EEE; } li { line-height: 18px; } ol { list-style-type: none; } ol { list-style: outside none decimal; } ol.vertical li.placeholder { position: relative; margin: 0; padding: 0; border: none; } /* line 25, /Users/jonasvonandrian/jquery-sortable/source/css/jquery-sortable.css.sass */ ol.vertical li.placeholder:before { position: absolute; content: ""; width: 0; height: 0; margin-top: -5px; left: -5px; top: -4px; border: 5px solid transparent; border-left-color: red; border-right: none; }

$(function () { var oldContainer $("ol.nested_with_switch").sortable({ group: 'nested', afterMove: function (placeholder, container) { if(oldContainer != container){ if(oldContainer) oldContainer.el.removeClass("active") container.el.addClass("active") oldContainer = container } }, onDrop: function (item, container, _super) { container.el.removeClass("active") _super(item) } }) });