jQuery droppable div not accepting clone

Question

I have a number of draggable images that I want to clone and then drop onto a div, with the option to reposition and add new clones after drop. After looking around this website, I narrowed it down to the following code:

function init() {

$("#bin").droppable({
  accept: '.symbol',
  drop: function(event, ui) {
      $(this).append($(ui.helper).clone());
      $("#bin .symbol").addClass("item");
      $(".item").removeClass("ui-draggable symbol");
      $(".item").draggable();
  }
}); 
$(".symbol").draggable({
  helper: 'clone',
  grid: [20, 50]
});
}

This seemed to work, but now while dragging the clone, it won't even appear over the droppable div (it is visible on the page, but then seems to "slip under" the droppable). Can someone tell me what's going wrong?

Html:

<div class="symbolSource">
<img src="pics/sun.png" alt="Bliss for 'sun'" class="symbol" />
<img src="pics/colour.png" alt="Bliss for 'colour'" class="symbol"  />
<img src="pics/tree.png" alt="Bliss for 'tree'" class="symbol" />
</div>
<div id="bin" ></div>  

CSS:

.symbolSource {
    padding: 0px 0;    
    margin: 20px;
    width: 100%;
    height: 150px;
    float: left;
    overflow: scroll;
}

#bin {
  background: #eee;
  height: 300px;
  width: 100%;
  position: relative;
  margin-top: 220px;
}

EDIT: The clone no longer disappears, but the div still won't accept it.

Answer 1

Check z-indexes of #bin and .symbol. The z-index of #bin should be lower than the z-index of .symbol

Answer 2

You might want to check The answer https://stackoverflow.com/a/868002/556856 to the question When I make a draggable clone and drop it in a droppable I cannot drag it again