Jquery 在嵌套列表中拖放 - 如何最小化/消除闪烁

Question

基于 http://jqueryui.com/demos/sortable/#placeholder 我正在研究允许用户重新组织嵌套列表的拖放界面。正如您从链接中看到的，这在简单列表上效果很好。

然而，当我尝试使用嵌套列表时，我得到了非常严重的闪烁。亲自尝试一下：

http://jsfiddle.net/unklefolk/G5xPE/

移动一些内部内容后对于外部列表的项目，反之亦然，您会发现有相当多的闪烁/抖动发生，特别是在外部列表和内部列表相交的点周围。

我可以采取什么措施来最大程度地减少这种闪烁？我可以对 jQuery 或 CSS 进行任何更改来减少这个问题吗？

Answer 1

看看这个嵌套的可排序插件。它是列表项驱动的，但它可能是您问题的答案。

nestedSortable jQuery 插件

Answer 2

通常我使用 helper: 'clone' 这对这个问题有一些影响（从来不明白为什么）。我不知道它是否有效，在我的 firefox 8 上看起来更好

$(function() {
    $( ".sortable" ).sortable({
        placeholder: "ui-state-highlight",
        connectWith: ".sortable",
         helper: 'clone'
    });
    $( ".sortable" ).disableSelection();
});

http://jsfiddle.net/nicolapeluchetti/G5xPE/17/

Answer 3

我以前也遇到过类似的问题，我没有时间去适应它，但这是我的解决方案。

使用js回调：

$(document).ready(function() {
    var s = $("#sortable");
    s.sortable({
        tolerance: 'pointer',
        stop: function(event, ui) {
            var ranks = ['gold','silver','bronze'];
            $("li",s).each(function (idx) {
                for(var i = 0; i < ranks.length; ++i) $(this).removeClass(ranks[i]);
                $(this).addClass(ranks[idx]);
            });
        }
    });
});

你可以在这里在jsfiddle.net看到它

Answer 4

在这里。只是想发布我最终做了什么来解决这个问题。基于 http://bugs.jqueryui.com/ticket/4741?cversion =0&cnum_hist=8 我取消注释 jquery-ui-1.8.6.js 中的以下行：

&& itemElement.parentNode == this.placeholder[0].parentNode // only rearrange items within the same container

我仍然使用connectWith 属性。

我现在可以在层次结构中的级别之间拖放，而不会出现闪烁。希望这对其他 SO 用户有所帮助。