Jquery Drag and Drop во вложенных списках - как минимизировать / убрать мерцание

Question

На основе http://jqueryui.com/demos/sortable/#placeholder Я работаю над интерфейсом перетаскивания, который позволяет пользователю реорганизовать вложенные списки.Как вы можете видеть из ссылки , она отлично работает с простыми списками.

Однако, когда я пробую это с вложенными списками, я получаю довольно сильное мерцание.Попробуйте сами по адресу:

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

Переместив некоторые внутренние элементы во внешний список и наоборот, вы увидите, что происходит довольно частое мерцание / сглаживание, особенновокруг точки, где встречается внешний список и внутренний список.

Что я могу сделать, чтобы минимизировать это мерцание?Могу ли я внести какие-либо изменения в jQuery или CSS, чтобы уменьшить эту проблему?

Answer 1

Взгляните на этот вложенный сортируемый плагин.Это управляемый элемент списка, но это может быть ответом на вашу проблему.

nestedSortable jQuery Plugin

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

ОП здесь.Просто хотел опубликовать то, что я наконец-то сделал, чтобы это исправить.Исходя из http://bugs.jqueryui.com/ticket/4741?cversion=0&cnum_hist=8 I без комментариев , следующая строка в jquery-ui-1.8.6.js:

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

Я все еще использую атрибут connectWith.

Теперь я могу перетаскивать между уровнями в иерархии без мерцания.Надеюсь, что это помогает другим пользователям SO.

Answer 4

Однажды у меня была похожая проблема, у меня нет времени на ее адаптацию, но вот мое решение.

Используйте обратный вызов 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