I have 5 pieces of a image in a div `sortable1` which i have to drag and drop in another div `sortable2`to complete the image. After the image is dropped in another container it will stick to the previous image present in this container.<http://jsfiddle.net/binit/JnYB9/>

After every drop event i want to check whether all the 5 pieces are collected in 2nd div and if it is yes then change button text. Something like this.

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

```

But i don't know where to use this logic in my code or what should be the syntax

My code:

**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>

```