jQuery UI Sortable Droponempty
Reanrannge items below, use mouse to drag items. First try to drag the item that has text "No drop on empty" to the empty placeholder, the empty placeholder won`t let you drop item on it.
Source Code
Expand
ExampleJquery ui sortable droponempty
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script> <!-- CSS --> <style type="text/css"> .list { background-color: lightblue; border: 1px solid gray; } .items .ui-selected { background: red; color: white; font-weight: bold; } .items { list-style-type: none; margin-left: 10px; padding: 0; width: 100px; float: left; } .items li { margin: 2px; padding: 2px; cursor: pointer; border-radius: 3px; } .g { background-color: lightgreen; } .o { background-color: orange; } .highlight { border: 2px solid red; font-weight: bold; } </style> <!-- Javascript --> <script> $(function () { $("#items1,#items2,#items4").sortable({ connectWith: "#items4", dropOnEmpty: true }); $("#items3").sortable({ connectWith: "#items4", dropOnEmpty: false }); $("#items1,#items2,#items3,#items4").disableSelection(); }); </script> <!-- HTML --> <ul id="items1" class="items" style="font-size:14px;"> <li class="list">Drop on empty</li> <li class="list">Drop on empty</li> <li class="list">Drop on empty</li> <li class="list">Drop on empty</li> <li class="list">Drop on empty</li> </ul> <ul id="items2" class="items" style="font-size:14px;"> <li class="list g">Drop on empty</li> <li class="list g">Drop on empty</li> <li class="list g">Drop on empty</li> <li class="list g">Drop on empty</li> <li class="list g">Drop on empty</li> </ul> <ul id="items3" class="items" style="font-size:14px;"> <li class="list o">No drop on empty</li> <li class="list o">No drop on empty</li> <li class="list o">No drop on empty</li> <li class="list o">No drop on empty</li> <li class="list o">No drop on empty</li> </ul> <ul id="items4" class="items" style="border:1px dotted #A3A3A3;height:160px;background-color:#D6E5FF" title="Empty Placeholder"> </ul>