【发布时间】：2015-08-07 18:55:02
【问题描述】：
信息：
正如标题所说，有多个父 div (.drag-w1)，我使用 overflow-y:auto 和 overflow-x:hidden，因为会有多个项目 (.item-archive)。这些项目将在父 div 之间排序。我试图找出解决方案，但没有任何效果。
问题：
在将项目 (.item-archive) 从一个父 div (.drag-w1) 拖动（或排序）到另一个时，项目隐藏在父 div 后面，但它在放置后显示。如果我没有使用溢出 css 属性，则项目没有索引问题，但这不是我想要的，我真的希望项目在父 div 内滚动，而不需要在从一个父 div 拖动到另一个时隐藏项目.如果我在 javascript 中删除 scroll:false 或将其更改为 true，则该项目会在父 div 中滚动，直到它被放到另一个 div 上。
试过了：
- 为 .item-archive 的 css 添加 z-index
- 在没有
drag and stop function的情况下将zIndex添加到javascript
代码：
$('.drag-tasks').sortable({
items: "> .item-archive",
connectWith: '.drag-tasks',
handle: '.item-top',
drag:function () {
$('.item-archive').css('z-index', '10001');
$(this).addClass('droped');
},
stop:function () {
$('.item-archive').css('z-index', '1');
$(this).removeClass('droped');
},
scroll: false,
snapMode: 'inner',
tolerance: 'pointer',
forceHelperSize: true,
helper: 'original',
appendTo: 'body'
}).disableSelection();.scroll-wrapper {
font-family: arial;
position: relative;
display: black;
width: 2000px;
height: 650px;
}
.drag-w1 {
background-color: #d5d5d5;
float: left;
margin: 0 5px;
max-width: 497px;
min-height: 1px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
position: relative;
width: calc(100% - 30px);
}
.sort-col-head-wrapper {
background-color: #212121;
display: block;
height: 55px;
margin: 0 -10px 10px;
position: relative;
color: #fff;
line-height: 55px;
padding: 0 10px;
}
.drag-tasks {
display: block;
max-height: 600px;
min-height: 600px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
.item-archive {
background: #fff none repeat scroll 0 0;
display: block;
float: left;
height: 105px;
margin-bottom: 10px;
margin-right: 19px;
max-width: 497px;
position: relative;
width: 100%;
}
.item-top {
display: block;
height: 57px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: calc(100% - 20px);
cursor: move;
padding: 10px 10px 0;
background: #f3f3f3;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="scroll-wrapper">
<div class="drag-w1">
<div class="sort-col-head-wrapper">
Headline
</div>
<div class="drag-tasks">
<div class="item-archive">
<div class="item-top">
Body11
</div>
</div>
<div class="item-archive">
<div class="item-top">
Body12
</div>
</div>
<div class="item-archive">
<div class="item-top">
Body13
</div>
</div>
<div class="item-archive">
<div class="item-top">
Body14
</div>
</div>
<div class="item-archive">
<div class="item-top">
Body15
</div>
</div>
<div class="item-archive">
<div class="item-top">
Body16
</div>
</div>
</div>
</div>
<div class="drag-w1">
<div class="sort-col-head-wrapper">
Headline
</div>
<div class="drag-tasks">
<div class="item-archive">
<div class="item-top">
Body21
</div>
</div>
<div class="item-archive">
<div class="item-top">
Body22
</div>
</div>
<div class="item-archive">
<div class="item-top">
Body23
</div>
</div>
</div>
</div>
<div class="drag-w1">
<div class="sort-col-head-wrapper">
Headline
</div>
<div class="drag-tasks">
<div class="item-archive">
<div class="item-top">
Body31
</div>
</div>
<div class="item-archive">
<div class="item-top">
Body32
</div>
</div>
<div class="item-archive">
<div class="item-top">
Body33
</div>
</div>
</div>
</div>
</div>问题：
我怎样才能做到这一点？
【问题讨论】：