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

删除课程overflow-y: auto; overflow-x: auto;中的行 .group-wrapper，拖动工作开始完美，但我的滚动条消失了。

JSFiddle

Answer 1

由于z-index堆叠，似乎您的可拖动显示在dropzone后面。

我猜测dropzone与draggables有不同的stacking context，但我还没有确切地确定原因。如果我弄明白的话，我会更新这个答案。

无论如何，我使用draggable的{​​{3}}选项取得了一些成功。此选项定义拖动时应附加可拖动助手的＆＃34; [w] hich元素，＆＃34;这有助于克服z-index堆叠的问题。

我也改变了＆＃34;帮助＆＃34;模式到＆＃34;克隆，因为：

  

注意：只有当helper选项设置为不使用原始元素时，appendTo选项才有效。

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;