dropzoneの下のCSS要素

Question

無限の水平スクロールバーを作成しました。何が起こるかは、私がdropzoneにいくつかの要素をドラッグする必要があり、それらは上記の代わりにdropzoneの下に現れます。

HTMLマークアップ：

<div class="wrapper"> 
    <div class="header"> 
     Drop here 
    </div> 
    <div class="group-wrapper"> 
     <div class="group-list"> 
     <div class="group">Drag me</div> 
     <div class="group">Drag me</div> 
     <div class="group">Drag me</div> 
     <div class="group">Drag me</div> 
     <div class="group">Drag me</div> 
     <div class="group">Drag me</div> 
     <div class="group">Drag me</div> 
     </div> 
    </div> 
</div> 

CSS：

.wrapper .header 
{ 
    overflow: hidden; 
    padding: 8px 4px 10px 8px; 
    position: relative; 
    width: 100%; 
    background-color: #ccc; 
    height: 100px; 
    text-align: center; 
    padding-top: 15px; 
} 

.wrapper .group-wrapper 
{ 
    width: 100%; 
    padding: 0px 5px 0px 8px; 
    top: 20px; 
    white-space: nowrap; 
    position: relative; 
    margin-left: 3px; 
    margin-right: 5px; 
    overflow-y: auto; 
    overflow-x: auto; 
} 

.wrapper .group-wrapper .group 
{ 
    width: 25%; 
    display: inline-block; 
    vertical-align: top; 
    margin: 0px 30px 0px 0px; 
    height: 100px; 
    border: 1px solid #ccc; 
    background-color: #000; 
    cursor: pointer; 
    color: #fff; 
} 

にドラッグ可能な開始が完璧に働いたが、私のスクロールバーが消える.group-wrapperクラス内の行overflow-y: auto; overflow-x: auto;を除去することにより。

JSFiddle

Answer 1

あなたのdraggablesが原因のzインデックススタッキングにドロップゾーンの後ろに表示されているようです。

私はdropzoneがdraggablesと異なるstacking contextを持っていると推測していますが、私はまだ正確にその理由を判断できませんでした。もし私がそれを理解したら、この回答を更新します。

いずれにしても、draggableにはappendToオプションを使用して成功しました。このオプションは、ドラッグ中にドラッグ可能なヘルパーを追加する要素を定義します。これは、Z-インデクススタッキングの問題を克服するのに役立ちます。

私はので、「クローンに「ヘルパー」モードをも変更しました：

注：appendToのオプションは、ヘルパーオプションは元の要素を使用しないように設定されているときに動作します

。

$(function() { 
 

 
    $('.group').draggable({ 
 
    revert: 'invalid', 
 
    helper: 'clone', 
 
    appendTo: '#container', 
 
    connectToSortable: ".header" 
 
    }); 
 

 
    $(".header").droppable({ 
 
    accept: ".group", 
 
    drop: function(event, ui) { 
 
     var drop = $(this), 
 
     drag = ui.draggable; 
 
     drag.appendTo(drop); 
 
    } 
 
    }); 
 

 
});

body { 
 
    background-color: #F0F5F8; 
 
    overflow-x: hidden; 
 
    overflow-y: hidden; 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div#container { 
 
    height: 100%; 
 
    width: 100%; 
 
    float: left; 
 
    position: relative; 
 
} 
 
section#navigation { 
 
    border-bottom: 3px solid #FFFFFF; 
 
    background-color: #72B8F1; 
 
    height: 30px; 
 
} 
 
section#navigation .navbar { 
 
    border-radius: 0px; 
 
    height: 100%; 
 
    margin-bottom: 0px; 
 
} 
 
section#navigation .navbar-brand { 
 
    margin-right: 15px; 
 
    color: #fff; 
 
    font-weight: 700; 
 
    line-height: 0px; 
 
    height: 30px; 
 
    margin-top: -3px; 
 
} 
 
section#content { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 30px; 
 
    bottom: 0; 
 
    margin-bottom: 0px; 
 
} 
 
section#content .row { 
 
    min-height: initial !important; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.wrapper .header { 
 
    overflow: hidden; 
 
    padding: 8px 4px 10px 8px; 
 
    position: relative; 
 
    width: 100%; 
 
    background-color: #ccc; 
 
    height: 100px; 
 
    text-align: center; 
 
    padding-top: 15px; 
 
} 
 
.wrapper .group-wrapper { 
 
    width: 100%; 
 
    padding: 0px 5px 0px 8px; 
 
    top: 20px; 
 
    white-space: nowrap; 
 
    position: relative; 
 
    margin-left: 3px; 
 
    margin-right: 5px; 
 
    overflow-y: auto; 
 
    overflow-x: auto; 
 
} 
 
.group { 
 
    width: 25%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin: 0px 30px 0px 0px; 
 
    height: 100px; 
 
    border: 1px solid #ccc; 
 
    background-color: #000; 
 
    cursor: pointer; 
 
    color: #fff; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> 
 
<div id="container"> 
 
    <section id="navigation"> 
 
    <div class="navbar" role="navigation"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <a href="#" class="navbar-brand"> 
 
      Brand name 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
    <section id="content"> 
 
    <div class="row"> 
 
     <div class="wrapper"> 
 
     <div class="header"> 
 
      Drop here 
 
     </div> 
 
     <div class="group-wrapper"> 
 
      <div class="group-list"> 
 
      <div class="group">Drag me 1</div> 
 
      <div class="group">Drag me 2</div> 
 
      <div class="group">Drag me 3</div> 
 
      <div class="group">Drag me 4</div> 
 
      <div class="group">Drag me 5</div> 
 
      <div class="group">Drag me 6</div> 
 
      <div class="group">Drag me 7</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</div>