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

信息：

正如标题所说，有多个父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存档的css添加z索引
在没有drag and stop function的情况下向javascript添加zIndex

代码：

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

代码没有错，但您在许多类中添加了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>

正如您所说，问题似乎是由override属性引起的。

我使用display: inline;为类.drag-tasks规避了这个问题。

.drag-tasks {
    display: inline; // use 'inline' instead of block
    max-height: 600px;
    min-height: 600px;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
}

现在它是可拖动的，但不可丢弃的，所以您需要编辑/覆盖jQuery ui函数，该函数检查.drag-tasks的display: block状态，并使其也能使用inline属性。希望这能为你指明正确的方向。

相关内容

最新更新

热门标签：