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

固定

jQuery UI draggable 落后于其他元素

jQuery UI draggable goes behind other elements

javascript

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-droppable