当我将元素放入其中时，使可放置的 div 动态扩展

Question

当我将 question1 和 question2 拖入 questionslots 时，我希望 questionSlots div 在第二个问题放入其中时动态扩展其大小。 即，这两个问题都应该在放入 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 );

    }*/
    }

js 小提琴：http://jsfiddle.net/6zGLk/14/

如果你能帮助我编辑js小提琴代码并转发你的链接会更好。

提前谢谢你。

Answer 1

您只想将$.appendTo() 与$.sortable() 一起使用。也稍微更新了你的函数和 CSS。

$(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>