Question

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

基本上我有：

<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中删除它？

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

0 个答案: