Problem with ui dropping multiple items into a div

I have created a very simple drag and drop quiz, where the user has a list of 8 actions that they must drag into the correct drop area (there are 3 drop areas). So I might have 2 or 3 items being dropped onto one droppable div.

This works fine except the actions are dragged on top of the previous dropped action, rather than stacking beneath.

I cant seem to find a definitive list of options to use with ui.draggable.position. This is the code I'm currently using to place the drop:

    function init() {

      // Hide the success message
      $("#next_area_full").hide();

      // Reset the game
      correctCards = 0;
      $('#dragPile').html( '' );
      $('#dragSlots').html( '' );

      // Create the pile of shuffled cards
      var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8];
      var sections = [ 1, 1, 1, 2, 2, 2, 3, 3];
      var percent = [ 'Use one measure of soap',
                'Rinse thoroughly (fingers/thumbs/wrists)',
                'Wet hands before applying soap',
                'Use correct amount of product',
                'Ensure thorough wetness',
                'Rub in quickly and vigorously',
                'Use hand cream',
                'Wear gloves for cleaning equipment'];

      for ( var i=0; i<8; i++ ) {
       $('<div>' + percent[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'section'+sections[i] ).appendTo( '#dragPile' ).draggable( {
        containment: '#content',
        stack: '#dragPile div',
        cursor: 'move',
        revert: true
       } );
      }

      // Create the drag slots
      var dsections = [ 1, 2, 3];
      var words = [ 'Drag here'];
      for ( var i=0; i<=2; i++ ) {
       $('<div>' + words + '</div>').data( 'number', i ).attr( 'id', 'section'+dsections[i] ).appendTo( '#dragSlots' ).droppable( {
        accept: '#dragPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
       } );
      }

     }

     function handleCardDrop( event, ui ) {
      var slotNumber = $(this).attr( 'id' );
      var cardNumber = ui.draggable.attr( 'id' );

      // If the card was dropped to the correct slot,
      // change the card colour, position it directly
      // on top of the slot, and prevent it being dragged
      // again

      if ( slotNumber == cardNumber ) {
       ui.draggable.addClass( 'correct' );
       ui.draggable.draggable( 'disable' );
       ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
       ui.draggable.draggable( 'option', 'revert', false );
       correctCards++;
      }

      // If all the cards have been placed correctly then display a message
      // and reset the cards for another go

      if ( correctCards == 5 ) {
         $("#next_area_full").fadeIn('slow');
       }

     }
   
     })

Code (markup):

But as I said above, they are just placed on top of the previous drop. It is adding a -50px top margin to subsequent elements.

demo: http://enetsystems.co.uk/drag/

Is there a simple way to get them to stack in a list?

Thanks

 

The problem is coming from the negative margin you are adding to the top. Change that value to 0. You have a fixed height and the content is bigger then the height of the div so you need to either make the font size smaller or set the height with min-height so it can expand down when needed.

 

Hi, thanks for your reply.

I am not actually adding a negative margin. This is being altered/amended by jquery in some way? I cant find a negative margin anywhere in the css. I am at a complete loss as to how the negative margin is being added.

If i use firebug to look at the div in question, I can see the negative margin:

element.style {
    left: 410px;
    position: relative;
    top: -50px;
    z-index: 9;
}

Code (markup):

But that code is being generated dynamically somehow? Can you find how its being added? Am i going mad?

 

Yes the styling your'e seeing is being added by the plugin. The way to over-ride inline styles is to use !important. This isn't a great way of developing but should fix the issues that you are having. After looking more into the problem you are having I can see this doesn't fix your issue completely as it only allows 3 items to be stacked. If I have more time later on I will try and find a fix for you.

 

Thanks. Appreciate your help