如何在拖动后使jQuery可排序不再可排序？

Question

我有一个div元素，我们可以删除两个可排序的div。我们希望将目标div限制为3个元素，这样它们就无法添加更多元素。 （但是元素应该在目标中保持可排序。）我该怎么做？

$(".fs").sortable({
    connectWith : '.fs',
    revert: true,
    helper: "clone",
   	receive: function(event, ui) {
        if ($(this).children().length >= 3) {
            $(this).sortable("cancel");
        }
    }
}).disableSelection();
	
$("#content .item").draggable({
    connectToSortable: ".fs",
    helper: "clone",
    revert: "invalid"
})

div {
  margin: .5ex;
  border: 1px solid black;
  padding: .5ex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="demo">
    <div id="content" >
        Content:
        <div class="item">item 1</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
        <div class="item">item 4</div>
        <div class="item">item 5</div>
    </div>
    <div class="fs" id="id1">Target 1</div>
    <div class="fs" id="id2">Target 2</div>
</div>