Html 是否可以将：CSS overflow:与jQuery draggable一起在div上滚动？

我正在尝试构建一个在两个嵌套div之间拖放的web应用程序。我的问题是当我使用CSS

溢出：滚动


当我拖动可拖动的div时，它会消失在自己的div后面。

我想启用滚动。可能吗

JSFiddle:


HTML

<div class="container-fluid">
  <div class="col-sm-8 well" id="flakDiv">
    <div id="flakJsDiv">
      <center>
        <div class='thisFlak' id='"+flakId+"'>
        <div class='flakUp'>DROPZONE<i class='fa fa-minus-circle pull-right deleteFlakBtn'></i></div>
        <div class='flakMiddle'><span class='flakCount'></span></div>
        <div class='flakDown'></div>
      </div>
    </center>
  </div>
</div>
<div class="col-sm-4 well" id="elementDiv">
   <div id="elementJsDiv">
      <div class="elementsDiv" id="'.$row['element_nr'].'" style="width: '.$langd.'px; height: '.$bredd.'px; background-color: #c2c2d6; cursor: pointer;">DRAG ME</div>
    </div>
  </div>
</div> 

JS

[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
/* Required to make elements draggable in old WebKit */
-khtml-user-drag: element;
-webkit-user-drag: element;
}

#flakDiv {
  background-color: white;
  overflow: scroll;
  height: 300px;
  max-height: 300px;
}

#elementDiv {
  background-color: white;
  overflow: scroll;
  height: 300px;
  max-height: 300px;
}

.elementsDiv {
  box-shadow: 0 0 0 1px white inset;
}

.thisFlak {
  width: 600px;
  height: 270px;
  padding: 0 !important;
  margin: 0 !important;
}

.flakUp {
  width: 600px;
  height: 100px;
  border: solid 1px black;
}

.flakMiddle {
  width: 600px;
  height: 50px;
  border: solid 1px black;
  background-color: #ffe6e6;
}

.flakCount {
  font-weight: bold;
}

.flakDown {
  width: 600px;
  height: 100px;
  border: solid 1px black;
}

    $(document).ready(function() {



  //Make elements Draggable
  $('.elementsDiv').draggable({
    containment: "document",
    revert: 'invalid',
    zIndex: 100,
    appendTo: 'document',
  });


  //Make flak droppable
  $('.flakUp').droppable({
    accept: '.thisFlak',
  });



}); //Document Ready

我尝试将
z-index
和stack添加到JS中。
拖动时可以将溢出设置为可见：

  $('.elementsDiv').draggable({
    containment: "document",
    revert: 'invalid',
    zIndex: 100,
    appendTo: 'document',
     start: function() {
                     $("#elementDiv").attr("style", "overflow: visible;");
      },
      stop: function() {
                     $("#elementDiv").attr("style", "overflow: scrolling;");
      }
  });

请参见此处：
拖动时可以禁用滚动，然后在拖放时可以重新启用滚动。@Malik这可能就是诀窍。比你强。我要试试这个！