jQuery UI Scrollable - 具有多个垂直可滚动父 div 的拖动项位置和索引错误

Question

信息:

如标题所示，有多个父 div (.drag-w1)，我使用 overflow-y:auto 和 overflow-x:hidden 作为将有多个元素(.item-archive)。这些元素将在父 div 之间排序。我试图找到解决方案，但没有任何效果。

问题:

将元素 (.item-archive) 从一个父 div (.drag-w1) 拖动(或排序)到另一个时，元素隐藏在父 div 后面，但在放下后会显示出来。如果我不使用 overflow css 属性，则元素没有索引问题，但这不是我想要的，我真的希望元素在父 div 内滚动，而不是在从一个父 div 拖动到另一个时隐藏元素.如果我在 javascript 中删除 scroll:false 或将其更改为 true，则该元素会在父 div 内滚动，直到它被放到另一个 div 上。

尝试过:

1. 将 z-index 添加到 .item-archive 的 css
2. 在没有拖停功能的情况下将 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>

问题:

我怎样才能让它工作？

JSFiddle

Answer 1

代码没有任何问题，但是你在许多类中添加了一个 css 属性 position: relative; 所以只做一件事删除或注释它就完成了。

$('.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>