Check out the following code snippet:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
#sortable1, #sortable2, #sortable3 {
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;
}
#sortable1 li, #sortable2 li, #sortable3 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script>
// debugger;
var sortableIn = 0;
$(function() {
$(".draggable").draggable({
connectToSortable: ".sortable",
helper: "clone",
revert: "invalid"
});
$(".sortable").sortable({
revert: true,
receive: function(event, ui) {
var $this = $(this);
if ($this.children('li').length > 2) {
alert("stopping");
$(ui.sender).sortable('cancel');
}
}
});
$("ul, li").disableSelection();
});
</script>
<body>
<ul id="sortable1">
<li class="ui-state-default sortable">Item 1</li>
<li class="ui-state-default sortable">Item 2</li>
<li class="ui-state-default sortable">Item 3</li>
<li class="ui-state-default sortable">Item 4</li>
<li class="ui-state-default sortable">Item 5</li>
</ul>
<ul id="sortable3">
<li class="ui-state-highlight draggable">Item 3</li>
</ul>
</body>
I am facing an issue where I need to restrict the number of items that can be dropped into a sortable container to 2. Is there a way to achieve this?
Additionally, I would like to know how I can remove an item from the sortable container when dragging it out. Any suggestions on how to accomplish this task?
Your help is much appreciated!