1

我有一个网络应用程序，用户可以在其中拖动许多不同组之间的项目，每个组都有自己的列表供项目进入。这些组本身落入具有固定高度的不同容器中，并且在用户拖动时需要可滚动一个物品。

基本上我有：

<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 组？

4

0 回答 0