http://jqueryui.com/demos/sortable/#placeholderに基づいて、ユーザーがネストされたリストを再編成できるドラッグアンドドロップインターフェイスを作成中です。 the linkからわかるように、これは単純なリストでうまくいきます。Jqueryネストされたリスト内のドラッグアンドドロップ - フリッカーを最小化/削除する方法
しかし、ネストされたリストで試してみると、かなりちらつきがひどくなります。外側のリストにいくつかのインナーアイテムを移動した後
http://jsfiddle.net/unklefolk/G5xPE/
とその逆あなたは、特に外側の点を中心に、起こってディザリング/ちらつきのかなりのビットがあることが表示されます。で、自分自身でそれを試してみてくださいリストと内側のリストが一致します。
このフリッカーを最小限に抑えるにはどうすればよいですか？この問題を軽減できるjQueryやCSSに変更はありますか？
は、この入れ子にソート可能なプラグインを見て、それを見ることができます。それはリスト項目主導ですが、あなたの問題に対する答えかもしれません。
私はこれまでと同じような問題を抱えていましたが、私はそれに適応する時間がありませんでしたが、私の解決策です。
は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]);
});
}
});
});
チップのおかげで、カイル。残念ながら、私はあなたのフィドルを取って、ネストされたリストにそれを拡張し、レベル間を移動するときにもちらつきを取得します。 http://jsfiddle.net/unklefolk/uueFC/私は何かが欠けている場合はわからない？ –
あなたが提供したフィドルにはネストされたリストがありません:) – Kyle
謝罪。これを試してみてください：http://jsfiddle.net/unklefolk/uueFC/3/私は素敵なチョコレートバーのイメージを失ってしまったのですが、それは本質的に同じだと思います。 –
通常私は私のFirefox 8は
$(function() {
$(".sortable").sortable({
placeholder: "ui-state-highlight",
connectWith: ".sortable",
helper: 'clone'
});
$(".sortable").disableSelection();
});
http://jsfiddle.net/nicolapeluchetti/G5xPE/17/
良く見える上helper: 'clone'ウィッヒは、それが動作するかどうか.Iは知りません（理由は理解していなかった）、この問題に何らかの影響を持って使用します
答えをありがとう、Nicola。私の実装に大きな影響を与えていないようですが、うまくいけば、これは他の誰かを助けるでしょう。 –
こちらです。私は最終的にこれを修正するために何を投稿したかったのですか？ jqueryの-UI-1.8.6.jsでhttp://bugs.jqueryui.com/ticket/4741?cversion=0&cnum_hist=8 I 非コメント次の行に基づいて：
&& itemElement.parentNode == this.placeholder[0].parentNode // only rearrange items within the same container
私はまだconnectWith属性を使用します。
これで、フリッカーのない階層内のレベル間でドラッグアンドドロップできるようになりました。これが他のSOユーザーに役立つことを願っています。
偉大なリンクブライアン。このプラグインは、私が必要とするもののほうがずっと多く見えます。数ヶ月前に私がこれを見つけたことを願っています。私はこのソリューションを使用することができないかもしれません.JQuery UIのルートと時間は限られていますが、この問題に遭遇した他のSOユーザーにとってはこの回答を賞金に贈ります。 –