Lassen Sie ein droppable div dynamisch expandieren, wenn ich ein Element in es fallen lassen

Question

Wenn ich die Frage1 & Frage2 in Fragebereiche ziehe, möchte ich das FrageSlots div seine Größe dynamisch erweitern, wenn die zweite Frage in es fallen gelassen wird. , d. H. Beide Fragen sollten berücksichtigt und sichtbar sein, wenn sie in den fragmentSlots fallengelassen werden.

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); 

    }*/ 
    } 

Die js Geige: http://jsfiddle.net/6zGLk/14/

Es wäre besser, wenn Sie mir helfen könnten durch e Den js Geigencode abschneiden und deinen Link weiterleiten.

Vielen Dank im Voraus.

Answer 1

Sie möchten nur $.appendTo() mit $.sortable() verwenden. Auch deine Funktionen und CSS wurden etwas überarbeitet.

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