How can I initialize a draggable on a droppable in Jquery?

Question

I am making a puzzle game in jquery and am using draggable and droppable. The puzzle starts with 6 pieces in the queue and I want to be able to move pieces from the puzzle board back to the queue but right now I can only move them to the board. I am working on solving this by adding a droppable to the queue but I don't know how to drop the draggable pieces into the droppable queue on initialization. Thanks in advance!

Jsfiddle: http://jsfiddle.net/p8tpn5e6/

Below is the queue droppable creation and then the pieces creation. I want to drop the pieces into the queue on-load.

function init() {
  // Create Queue
  for ( var i=0; i<6; i++ ) {
    $('<div>' + 'q' + [i] + '</div>').attr( 'id', 'queue'+numbers[i] ).appendTo( '#queuePile' ).droppable( {
        accept: '#tilePile div',
        hoverClass: 'hovered',
        drop: handleTileDrop,
    } );
  }
  // Create the pile of tiles
  for ( var i=0; i<6; i++ ) {
    $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#tilePile' ).draggable( {
      containment: '#content',
      stack: '#tilePile div',
      cursor: 'move',
      revert: 'invalid'
    } );
  }

Answer 1

So I figured out a way to do it using css. I just initialized both the droppable queue and the draggable pieces in the same position. Then set the draggable on top by setting it's css z-index = 1.