Jquery dropzone下的CSS元素

我创建了一个无限的水平滚动条。我需要将一些元素拖到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>

通过删除行

overflow-y:auto；溢出-x：自动

在类

.group wrapper

中，draggable开始正常工作，但我的滚动条消失了

---

由于z索引堆叠，DragTables似乎出现在dropzone后面

我猜dropzone与DragTables有一个不同的特性，但我还不能确定确切的原因。如果我弄明白了，我会更新这个答案

无论如何，通过使用

draggable

选项，我取得了一些成功。此选项定义“[w]拖动时可拖动辅助对象应附加到哪个元素”，这有助于解决z索引堆叠的问题

我还将“助手”模式更改为“克隆”，因为：

注意：appendTo选项仅在helper选项设置为不使用原始元素时有效

$（函数（）{
$（'.group'）。可拖动({
还原：“无效”，
助手：“克隆”，
附件：“#容器”，
connectToSortable:“.header”
});
$（“.header”）.droppable({
接受：“.group”，
drop：函数（事件、用户界面）{
var drop=$（此），
drag=ui.draggable；
拖放.appendTo（drop）；
}
});
})；

正文{
背景色：#F0F5F8；
溢出x：隐藏；
溢出y：隐藏；
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
分区#集装箱{
身高：100%；
宽度：100%；
浮动：左；
位置：相对位置；
}
第#节导航{
边框底部：3倍实心#FFFFFF；
背景色：#72B8F1；
高度：30px；
}
第#节导航.导航栏{
边界半径：0px；
身高：100%；
边缘底部：0px；
}
第#节导航。导航栏品牌{
右边距：15px；
颜色：#fff；
字号：700；
线高：0px；
高度：30px；
利润上限：-3px；
}
第#节内容{
位置：绝对位置；
左：0；
右：0；
顶部：30px；
底部：0；
边缘底部：0px；
}
第#节内容.行{
最小高度：初始！重要；
身高：100%；
位置：相对位置；
}
.包装纸{
宽度：100%；
身高：100%；
}
.wrapper.header{
溢出：隐藏；
填充：8px 4px 10px 8px；
位置：相对位置；
宽度：100%；
背景色：#ccc；
高度：100px；
文本对齐：居中；
填充顶部：15px；
}
.wrapper.group wrapper{
宽度：100%；
填充：0px 5px 0px 8px；
顶部：20px；
空白：nowrap；
位置：相对位置；
左边距：3倍；
右边距：5px；
溢出y：自动；
溢出-x：自动；
}
.组{
宽度：25%；
显示：内联块；
垂直对齐：顶部；
保证金：0px 30px 0px 0px；
高度：100px；
边框：1px实心#ccc；
背景色：#000；
光标：指针；
颜色：#fff；
}

到这里来
拖我一程
拖我2
拖我3分钟
拖我4
拖我5分钟
拖我6
拖我7分钟

由于z索引堆叠，DragTables似乎出现在dropzone后面

我猜dropzone与DragTables有一个不同的名称，但我还不能确定确切的原因。如果我弄清楚了，我会更新这个答案

在任何情况下，我都成功地使用了

draggable

选项。该选项定义了“[w]拖动时应将可拖动辅助对象附加到哪个元素”，这有助于克服z索引堆叠的问题

我还将“助手”模式更改为“克隆”，因为：

注意：appendTo选项仅在helper选项设置为不使用原始元素时有效

$（函数（）{
$（'.group'）。可拖动({
还原：“无效”，
助手：“克隆”，
附件：“#容器”，
connectToSortable:“.header”
});
$（“.header”）.droppable({
接受：“.group”，
drop：函数（事件、用户界面）{
var drop=$（此），
drag=ui.draggable；
拖放.appendTo（drop）；
}
});
});
正文{
背景色：#F0F5F8；
溢出x：隐藏；
溢出y：隐藏；
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
分区#集装箱{
身高：100%；
宽度：100%；
浮动：左；
位置：相对位置；
}
第#节导航{
边框底部：3倍实心#FFFFFF；
背景色：#72B8F1；
高度：30px；
}
第#节导航.导航栏{
边界半径：0px；
身高：100%；
边缘底部：0px；
}
第#节导航。导航栏品牌{
右边距：15px；
颜色：#fff；
字号：700；
线高：0px；
高度：30px；
利润上限：-3px；
}
第#节内容{
位置：绝对位置；
左：0；
右：0；
顶部：30px；
底部：0；
边缘底部：0px；
}
第#节内容.行{
最小高度：初始！重要；
身高：100%；
位置：相对位置；
}
.包装纸{
宽度：100%；
身高：100%；
}
.wrapper.header{
溢出：隐藏；
填充：8px 4px 10px 8px；
位置：相对位置；
宽度：100%；
背景色：#ccc；
高度：100px；
文本对齐：居中；
填充顶部：15px；
}
.wrapper.group wrapper{
宽度：100%；
填充：0px 5px 0px 8px；
顶部：20px；
空白：nowrap；
位置：相对位置；
左边距：3倍；
右边距：5px；
溢出y：自动；
溢出-x：自动；
}
.组{
宽度：25%；
显示：内联块；
垂直对齐：顶部；
保证金：0px 30px 0px 0px；
高度：100px；
边框：1px实心#ccc；
背景色：#000；
光标：指针；
颜色：#fff；
}

到这里来
拖我一程
拖我2
拖我3分钟
拖我4
博士
.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;
}