要素をドロップすると、ドロップ可能なdivを動的に展開します

Question

質問1 & question2をquestionslotsにドラッグすると、2番目の質問がドロップされたときに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/

あなたはで私を助けることができればそれは良いだろうe js fiddleコードを書き留めてあなたのリンクを転送します。

ありがとうございます。

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>