html - 是否可以使用 : CSS overflow: scroll on a div together with jQuery draggable?

Question

我正在尝试通过在两个嵌套的 div 之间进行拖放来构建 Web 应用程序。我的问题是当我使用 CSS overflow:scroll

当我拖动可拖动的 div 时，它会消失在它自己的 div 后面。
我想启用滚动。可能吗？

JSFiddle:
http://jsfiddle.net/rs9r9u0p/4/

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> 

CSS

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

JS

    $(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 和堆栈添加到 JS..

Answer 1

您可以将溢出设置为在拖动时可见:

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

参见此处:http://jsfiddle.net/arcLc039/