Question

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

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

问题

那些文件夹在视觉上被推下并扩展了相关文件夹，但仍会在旧位置悬停区域。

关注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;
}

有什么想法吗？

谢谢！

Answer 1

有支持者：jQueryUI docs refreshpositions

但是：

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

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

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

也许我们可以看一下当refreshpositions设置为true并制作“轻量版”时场景背后会发生什么？

当改变可放置位置时，悬停区域不会改变

1 个答案: