jQuery UI draggableは他の要素の後ろにあります

Question

私はドラッグ可能なオプションを3つの異なるボックスにドラッグしてからボックス間で移動できるようにしようとしています。最初のオプションをドラッグしてボックスにドロップすると、正常に動作します。しかし、何らかの理由でドロップされたアイテムを別のボックスに移動しようとすると、ドロップされたアイテムを除いてページ上の他のエレメントの後ろに移動します。私はそれが落ちる前にそれが働いているのと同じように働くことを望んでいます。
誰も助けてくれますか？ jsfiddle例：https://jsfiddle.net/cz6kL69c/2/
私のhtmlコード：

<div id="questionContainer"> 
    <div id="optionContainer"> 
    <div class="option"> 
     <label>Option 1</label> 
    </div> 
    <div class="option" > 
     <label>Option 2</label> 
    </div> 
    <div class="option "> 
     <label >Option 3</label> 
    </div> 
    </div> 
    <div id="BoxContainer" style="column-count: 3;"> 
    <div class="box"><b>Box 1</b></div> 
    <div class="box"><b>Box 2</b></div> 
    <div class="box"><b>Box 3</b></div> 
    </div> 
    <div id="answerContainer" style="column-count: 3;"> 
    <div class="answerBox"></div> 
    <div class="answerBox"></div> 
    <div class="answerBox"></div> 
    </div> 
</div> 

CSS：

#answerContainer { margin-top:5px;} 
#optionContainer { margin:20px 0;} 
.dragOver { background-color: lightgreen;} 

.box { 
cursor:default; 
margin: 0px 2px 2px 0px; 
text-align:center; 
background-color:green; 
font-size:1em; 
padding:15px 10px; 
} 

.answerBox { 
min-height:200px; 
border: solid 1px black; 
margin: 0px 2px 2px 0px; 
padding:5px 5px; 
} 

.option { 
width:245px; 
margin: 0px 2px 2px 0px; 
background-color:lightblue; 
font-size:1em; 
padding:10px 10px; 
} 

JS

$(document).ready(function() 
{ 
    $(".option").draggable({ 
     revert: "invalid" 
    }); 
    $(".answerBox").droppable({ 
     hoverClass: "dragOver", 
     drop: function(event, ui) { 
      $(ui.draggable).css({'left':'0', 'top':'0'}); 
      var item = $(ui.draggable); 
      if (!item.hasClass('copy')) 
      { 
       item = item.clone().addClass('copy'); 
       item.draggable({ 
        revert: "invalid" 
       }); 
      } 
      $(this).append(item); 
     } 
    }); 
}); 

Answer 1

$(document).ready(function() 
{ 
    $(".option").draggable({ 
    revert: "invalid" 
    }); 
    $(".answerBox").droppable({ 
     hoverClass: "dragOver", 
     drop: function(event, ui) { 
     $(ui.draggable).css({'left':'0', 'top':'0'}); 
     var item = $(ui.draggable); 
     if (!item.hasClass('copy')) 
     { 
      item = item.clone().addClass('copy'); 
      item.draggable({ 
      revert: "invalid", 
      start: function(event, ui) { 
       item.hide(); 
      }, 
      stop: function(event, ui) { 
       item.show(); 
      }, 
      helper: "clone" 
     }); 
     } 
     $(this).append(item); 
     } 
    }); 
}); 

固定