Javascript 计数<；img>；在drop事件后的div中

我在一个div

sortable1

中有5张图像，我必须将其拖放到另一个div

sortable2

中才能完成图像。将图像放入另一个容器后，它将粘贴到此容器中的前一个图像

在每次下降事件后，我想检查是否所有的5件收集在第二个div，如果是，然后改变按钮文本。像这样的

if $('#sortable2').find('img').length == 5:
    document.getElementById('btn-start').text = "end";

但是我不知道在我的代码中在哪里使用这个逻辑，或者语法应该是什么

我的代码：

javascript

$(function() {

  $( "#sortable1" ).sortable({
  connectWith: "div"
  });

  $( "#sortable2" ).sortable({
  connectWith: "div",
  change: function( event, ui ) {
  var theID = ui.item.attr('id');
  ui.item.addClass(theID + '-style');
 }
 });


 });

HTML

<div id="sortable1" class="well span10">   
<img id="north-img"  src="{% static 'images/demo/north.png' %}" >    
<img id="south-img"  src="{% static 'images/demo/south.png' %}" >    
<img id="east-img"  src="{% static 'images/demo/east.png' %}" >    
<img id="west-img"   src="{% static 'images/demo/west.png' %}" >    
<img id="center-img"  src="{% static 'images/demo/center.png' %}" >
</div>
<div id="sortable2"  class="well span7" style="height:800px">

  <a id="btn-start" href="/dashboard/save/" class="btn btn-primary btn-embossed">Start</a>
</div>

---

使用可排序EV的

停止

功能，每次使用id对div中的元素进行排序

可排序1

stop: function( event, ui ) {
   if($('#sortable2').find('img').length==5)
   $('#btn-start').html("end");
 }

---

您可以在sortable方法上编写回调函数，如下所示：

 $( "#sortable1" ).sortable({
   connectWith: "div",
   stop: function() {
           // your logic goes here
   }
 });

您还可以使用开始回调