jQuery UI Scrollable - 使用多个垂直可滚动父div

时间：2015-08-07 09:56:50

标签： jquery html5 css3 jquery-ui

的信息：

就像标题所说，有多个父div（.drag-w1），我使用overflow-y:auto和overflow-x:hidden，因为会有多个项目（.item-archive）。这些项目可以在父div之间进行排序。我试图找到一个解决方案，但没有任何效果。

问题：

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

尝试：

  1. 将z-index添加到.item-archive的css
  2. 在没有drag and stop function
    3. 的情况下将zIndex添加到javascript中

    代码：

    ＆＃13;
    ＆＃13; 
    $('.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();
    ＆＃13; 
    .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;
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    问题：

    我该如何做到这一点？

    JSFiddle

2 个答案:

答案 0 :(得分：1)

代码没有任何问题，但您在许多类中添加了css属性position: relative;，所以只需删除或评论一件事即可完成。

＆＃13;
＆＃13; 
$('.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();
＆＃13; 
    .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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

正如您所说，问题似乎是由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函数，该函数检查display: block的{​​{1}}状态并使其与.drag-tasks属性一起使用太。希望这能指出你正确的方向。

相关问题
最新问题