JQuery UI可排序连接列表,可滚动Div不工作

时间:2012-08-09 17:48:14

标签: jquery jquery-ui jquery-ui-sortable jquery-ui-draggable jquery-scrollable

我有一个网络应用程序,用户可以在许多不同的组之间拖动项目,每个组都有自己的项目列表。这些组本身属于不同的容器,具有固定的高度,需要可滚动,而用户正在拖动项目。

基本上我有:

<body>
    <div id='leftContainer'>Fitlers And Other Stuff Over Here</div>

    <div id='middleContainer'>
        <div id='group1'>
            <ul class='.items'>
                <li class='.item' id='item1'></li>
                <li class='.item' id='item2'></li>
            </ul>
        </div>
        <div id='group2'>
            <ul class='.items'>
            </ul>
        </div>
        <div id='group3'>
            <ul class='.items'>
                <li class='.item' id='item3'></li>
            </ul>
        </div>

            ....

        <div id='groupN'>
            <ul class='.items'>
                <li class='.item' id='itemN'></li>
            </ul>
        </div>
    </div>

    <div id='rightContainer'>
        <div id='specialGroup'>
            <ul class='.items'>
                <li class='.item' id='item4></li>
                <li class='.item' id='item5></li>
            </ul>
        </div>
    </div>
</body>

此项目可以排序连接到任何“.items”列表。 拖动项目时,他们需要在中间和右侧容器之间拖动,所以我使用appendTo:'body'来解决z-index问题。 中间容器和左侧容器都具有固定的高度(因此是单独的滚动条),如果拖动靠近该容器的顶部/底部边界,则需要可滚动。

$('.items').sortable({
    connectWith: '.items',
    opacity: 0.6, revert: true, cursor: 'move', cancel: '.incomplete',
    appendTo: 'body',
    helper: 'clone',
    placeholder: 'item-drop-placeholder'
});

使用此配置,在发生拖动时,middleContainer / rightContainer不会滚动。相反,整个身体滚动。我试图实现自己的例程来处理滚动相应的容器,同时拖动以下.sortable选项。

scroll: false,
sort: scrollContainersDuringItemDrag

function scrollContainersDuringItemDrag(event, ui) {

    if (event.pageX is within middleContainerBoundary) {
        if (event.pageY is near bottom of middle container)
            $('#middleContainer').scrollTop($('#middleContainer').scrollTop() + 30);
        else if (event.pageY is near top of middle container)
            $('#middleContainer').scrollTop($('#middleContainer').scrollTop() - 30);
    }

    else if (event.pageX is within rightContainerBoundary) {
        if (event.pageY is near bottom of right container)
            $('#rightContainer').scrollTop($('#rightContainer').scrollTop() + 30);
        else if (event.pageY is near top of right container)
            $('#rightContainer').scrollTop($('#rightContainer').scrollTop() - 30);
    }
}

自定义滚动例程工作,容器在拖动时滚动,但是与其他列表的排序连接会在初始视图边界之外停止。

例如,如果我在中间容器中的group1中有一个项目。我拖动它,它可以在不同的组之间进行排序。如果组4在组1的右侧可见而不滚动,我可以毫无问题地将其拖到组4。

如果我将它拖向中间容器的底部并向下滚动容器,然而,例如组12现在滚动到视图中。我无法将项目排序到组12中,因为当拖动开始时它不在视图中。如果在向下滚动后组1仍然可见,我可以将项目放在组1列表中的较低位置,然后将其重新拾取并将其移至组12。

如何调整此项以便在向下滚动后直接在组12中删除它?

0 个答案:

没有答案