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.
ExampleJquery ui sortable droponempty
Source Code Expand
<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>


comments powered by Disqus