Make a droppable div dynamically expand when i drop an element into it

Question

When I drag the question1 & question2 into questionslots i want the questionSlots div to expand its size dynamically when the second question is dropped into it. i.e. both the questions should be accomadated and visible in when dropped in the questionSlots.

Html:

<div id="questionsHolder">
    <div id="question1" class="question">
        1. This is a random question.
    </div>
</div>
<div id="questionsHolder1">
    <div id="question2" class="question1">
        2. This is a random question.
    </div>
</div>
 <br>
     <br><br><br><br><br>
 <div id="questionSlots"></div>

CSS:

.question {
  width: 500px;
  height: 50px;
  margin-top: 25px;
  background: #ebedf2;
  border: 1px solid #333;
  clear: both;
  text-align: center;
  z-index: 200;
}
.question1 {
  width: 500px;
  height: 50px;
  margin-top: 25px;
  background: #ebedf2;
  border: 1px solid #333;
  clear: both;
  text-align: center;
  z-index: 200;
}

#questionSlots div {
  /*margin-top: 25px;*/
  border-width: 3px;
  border-style: dashed;
  width: 496px;
  height: 46px;
  background: #ddf;
    overflow:hidden;
}

#questionsHolder{
  border-width: 3px;
  border-style: dashed;
  width: 496px;
  /*height: 46px;*/
  background: grey;
}
#questionsHolder1{
  border-width: 3px;
  border-style: dashed;
  width: 496px;
  /*height: 46px;*/
  background: grey;
}

#questionSlots .question.hovered {
  background: green;
}

JS:

$( init );

function init() {
    // Create droppable
            $('<div id="slot1"></div>').appendTo( '#questionSlots' ).droppable( {
              accept: '#questionsHolder div,#questionsHolder1 div',

              hoverClass: 'hovered',
                drop:function(event, ui){
                    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                }
            } );

    $('#questionsHolder').droppable( {
              //accept: '#slot1 div',
              hoverClass: 'ui-state-highlight',
                 drop:function(event, ui){
                    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                }  

            } );

    // Make question draggable
        $("#question1").draggable( {
            cursor: 'move',
            //snap: '#content',
            revert: 'invalid'
            } );
              // Make question draggable
        $("#question2").draggable( {
            cursor: 'move',
            //snap: '#content',
            revert: 'invalid'
            } );

    /*function handleQuestionDrop( event, ui ) {
        // Make sure no more questions get dropped at droppable
        // position it directly on top of the slot
        $(this).droppable({ accept: ('#' + $(ui.draggable).attr('id') ) });
        ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
        ui.draggable.draggable( 'option', 'revert', false );

    }*/
    }

The js fiddle : http://jsfiddle.net/6zGLk/14/

It would be better if you could help me by editing the js fiddle code and forward your link.

Thank you in advance.

Answer 1

You just want to use $.appendTo() with $.sortable(). Updated your functions and CSS a bit, too.

$(init);

function init() {
  $('<div id="slot1"></div>').appendTo('#questionSlots').droppable({
    accept: '#questionsHolder div,#questionsHolder1 div',
    hoverClass: 'hovered',
    drop: function(event, ui) {
      ui.draggable.css({
        top: 0,
        left: 0
      }).appendTo(this);
    }
  }).sortable();

  $('#questionsHolder, #questionsHolder1').droppable({
    //accept: '#slot1 div',
    hoverClass: 'ui-state-highlight',
    drop: function(event, ui) {
      ui.draggable.css({
        top: 0,
        left: 0
      }).appendTo(this);
    }

  });

  $("#question1,#question2").draggable({
    cursor: 'move',
    revert: 'invalid',
  });

}

.question {
  width: 500px;
  height: 50px;
  background: #ebedf2;
  border: 1px solid #333;
  clear: both;
  text-align: center;
  position: relative;
  z-index: 1;
}

.question1 {
  width: 500px;
  height: 50px;
  background: #ebedf2;
  border: 1px solid #333;
  clear: both;
  text-align: center;
}

#questionSlots div {
  /*margin-top: 25px;*/
  border-width: 3px;
  border-style: dashed;
  width: 496px;
  min-height: 46px;
  background: #ddf;
  overflow: hidden;
}

#questionsHolder {
  border-width: 3px;
  border-style: dashed;
  width: 496px;
  height: 46px;
  background: grey;
}

#questionsHolder1 {
  border-width: 3px;
  border-style: dashed;
  width: 496px;
  height: 46px;
  background: grey;
}

#questionSlots .question.hovered {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="questionsHolder">
  <div id="question1" class="question">
    1. This is a random question.
  </div>
</div>
<div id="questionsHolder1">
  <div id="question2" class="question1">
    2. This is a random question.
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="questionSlots"></div>