jQuery用户界面可拖拽后面的其他元素

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

固定