0

我正在实现类似文件夹的 UI，用户可以在其中拖放文件夹之间的项目。

文件夹自上而下排列。当可拖动项目超过折叠文件夹时，应展开以显示其内容。当有问题的文件夹展开时，它下面的另一个文件夹将通过这个动画在视觉上被推下。

问题

那些随着相关文件夹的扩展而在视觉上被向下推的文件夹，仍将在旧位置具有悬停区域。

下面的JSFiddle说明了这个问题：

HTML：

<body>
<a class="item" href="#">Draggable Item</a>
<ul class="folders">
    <li>Folder 1&nbsp;<span>Drag and hold item over me.</span></li>
    <li>Folder 2&nbsp;<span>My hover area will not not change, because of pushing me down.</li>
</ul>
<div id="message"></div>

JavaScript：

$(".folders li").droppable({
    accept: ".item",
    hoverClass: "over",
    over: function (e, ui) {
        var folder = $(this);
        var isFirstFolder = $(".folders li").index(folder) === 0;
        if (isFirstFolder) setTimeout(function () {
            folder.animate({
                height: 100
            }, 600, function () {
                $("#message").html("Okay! Then drag a little bit lower");
            });
        }, 600);
    }
});
$(".item").draggable();

CSS：

.folders {
    list-style: none;
    padding: 0;
}
.folders li {
    padding: 5px;
    border: solid thin black;
    margin: 3px;
}
.folders li span {
    color: #999;
    font-size: 13px;
}
.folders li.over {
    border: dashed thin black;
}
.item {
    background-color: #ccc;
    padding: 7px;
}

有任何想法吗？

谢谢！

4

1 回答 1

1

有内置支持：jQueryUI docs refreshpositions

然而 ：

如果设置为 true，则每次鼠标移动都会计算所有可放置位置。警告：这解决了高度动态页面上的问题，但会显着降低性能。

所以你可以像这样解决位置问题：

 $(".item").draggable({
        refreshPositions: true 
    });

也许我们可以看看幕后发生了什么，将 whenrefreshpositions设置为 true 并制作一个“轻量版”？

于 2013-07-09T09:27:22.960 回答