draggable images overlapping in a div

draggable images overlapping in a div

For a game with a twelve pictures drag 'n drop I want to set up the draggable images overlapping in a div at the left side of the window..
The script works fine except for the blue part.

var posTop = 40;
var posLeft= 30;
  for ( var i=0; i<12; i++ ) {
    $('<div>').html('<img src="'+pictureShuffled[i]+'"/ >').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
      left: posLeft,          //and place it at the left side
      top: posTop,
        posTop += 44;                                    
        if (posTop > 420){posTop = 90};
        posLeft += 45;   
        if (posLeft > 140){posLeft = 10};
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );
  }
Can somebody tell me how to solve this setup-problem?