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/

是否可以使用：CSS溢出：与jQuery draggable一起滚动div？

1 个答案: