Firefox3.6のjQueryUI1.7.2ソート可能リストに問題があり、IE7-8は正常に動作します。少し下にスクロールすると、ヘルパー要素のオフセットがマウスポインターから下にスクロールしたのと同じ高さであるように見えるため、最初にドラッグを開始したアイテムを確認できません。これを修正または回避するにはどうすればよいですか？修正がない場合、本当に優れた代替のドラッグ可能なプラグインは何ですか？
ソート可能なものの初期化パラメーターは次のとおりです。
$("#sortable").sortable( {placeholder: 'ui-state-highlight' } );
$("#sortable").disableSelection();
ブラウザーのスニッフィングを防止したい場合、CSS の唯一の解決策は、ul またはコンテナー スタイルを に設定することoverflow: autoです。firebug を通してソースを見ると、それは jQuery がexampleで行う方法です。
私はこの問題を見ていて、自分のページに含まれる div の 1 つから css ルール position:relative を削除することで解決できました。参照: http://forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff
私もこの問題を抱えていて、次のコードで修正しました：
var wscrolltop = 0;
$sortable_elements.sortable({
start: function(event, ui) {
wscrolltop = $(window).scrollTop();
},
sort: function(event, ui) {
ui.helper.css({'top' : ui.position.top + wscrolltop + 'px'});
}
});
sortable-elementでスクロールすると、まだ問題があることがわかりました。多分誰かがこれに対する解決策を持っていますか？
更新：修正は次のとおりです。
$sortable_elements.sortable({
connectWith: '#personal-favs ul.fitems',
sort: function(event, ui) {
ui.helper.css({'top' : ui.position.top + $(window).scrollTop() + 'px'});
}
});
しかし、それでも-リストを離れると、sort-eventは停止するようです。
また、これが Firefox に固有であるという事実を説明する必要があります。これが私が使用しているスニペットです。Harris のソリューションから正しい方法で指示されました。ソート可能オブジェクトが相対的に配置されたコンテナーにある場合、ヘルパーを使用しないとこの問題が発生しました。
var options = {
handle: '.mover',
update:updateSorting
};
var userAgent = navigator.userAgent.toLowerCase();
if(userAgent.match(/firefox/)) {
options["start"] = function (event, ui) { ui.item.css('margin-top', $(window).scrollTop() ); };
options["beforeStop"] = function (event, ui) { ui.item.css('margin-top', 0 ); };
}
$("#" + list_id+"").sortable(options);
$("#" + list_id+"").disableSelection();
サーバーでこのチェックを行ってから、ブラウザに応じて 2 つの異なる呼び出しを行うこともできます。
私はこれを修正することができました：
$( "items" ).sortable({
start: function (event, ui) {
if( ui.helper !== undefined )
ui.helper.css('position','absolute').css('margin-top', $(window).scrollTop() );
},
beforeStop: function (event, ui) {
if( ui.offset !== undefined )
ui.helper.css('margin-top', 0);
},
placeholder: 'placeholder-class'
});
基本的に、ブラウザの現在の scrollTop() 値をヘルパーの位置に追加するには、ソート可能の「開始」イベントをリッスンする必要があります。次に、ソート可能の「beforeStop」イベントをリッスンして、アイテムが正式にリリースされる前にそのオフセットを削除する必要があります。リストの新しい位置に戻されます。
それが誰かに役立つことを願っています!
html { overflow-y: scroll }私は自分のサイトでスクロールバーを強制的に使用しているため、CSSが原因でこのスクロール可能なオフセットの問題が発生します。
スクロール可能のオンとオフを切り替えるときは、次の方法で回避しました。IE8、FF12、およびChromeでのみテストしました...
turnSortingOnOff:function(e) {
e.preventDefault();
if (stopOrdering()) {
// get rid of the hacky css on the html element
$('html').css({ 'overflow-y': '' });
$('html').css({ 'margin-right': '' });
elmt.sortable('disable');
}
else if (startOrdering()) {
// if the body is smaller than the window
// then there aren't any scrollbars
// in which case, add a right hand margin of 16px
// to the html to prevent the site wobbling
if ($('body').outerHeight() <= $(window).height()) {
$('html').css({ 'margin-right': 16 });
}
// then override the { overflow-y: scroll }
// in the css by setting it to a nice, safe inherit
$('html').css({ 'overflow-y': 'inherit' });
elmt.sortable('enable');
}
}
明らかに防弾ではありません。並べ替え中にドキュメントのサイズが変更された場合は、他のことを行う必要があります。ただし、私の経験では、そのような状況ではそれほど奇妙に見えません。
将来の読者のために、ブートストラップ ダイアログのスクロールされた div 内をドラッグすると、ヘルパー要素にオフセットがあるという同様の問題に遭遇しました。ドラッグされたオブジェクトを解放すると、アニメーションは、ページのスクロール部分を考慮せずに、ドラッグされたヘルパー要素を新しい位置に向けて送信します。これは、ユーザーに混乱を招くフィードバックを与えます。
ダイアログコンテナでposition:relativeとoverflow-y:autoで物事を動かし続けるために、私の解決策は
1- ソート開始イベントでヘルパー オブジェクトの margin-top に scrollTop() オフセットを追加します。
2- beforeStop イベントの margin-top を削除します
これにより、ドラッグ後にアニメーションがオフになる問題が修正されましたが、ページのスクロールされた部分をドラッグしている間、ヘルパー オブジェクトがカーソルの下に押し込まれます。最後の修正は
3- ポインターとコンテナー オフセットを基準にして (並べ替えイベントを使用して) ドラッグしているときに、ヘルパー オブジェクトの top プロパティを計算して設定します。
$(...).sortable({
...
start: function (event, ui) {
ui.helper.css('margin-top', $("#mybootstrap-dialog").scrollTop());
},
beforeStop: function (event, ui){
ui.helper.css('margin-top',0);
},
sort: function(event, ui) {
var top = event.clientY - $('#my-sortable-ul').offset().top - $("#mybootstrap-dialog").scrollTop();
ui.helper.css({'top' : top + 'px'});
}
},
...
});
ヘルプこれが役立ちます
新しいjQuery/jQuery UIバージョンを使用してこれを「修正」しました。
この設定overflow: autoにより、Firefoxはポインタの下の要素からドラッグを開始しますが、自動スクロールが正しく機能しなくなります。スクロールが必要になるほどウィンドウを小さくすると、jQueryのSortableの例でそのことがわかります。
私はoverflow: scrollhtmlタグを持っていましたが、それと（私が思うに）すべての相対的な要素を含む要素を削除しても、問題は完全には解決しませんでした（つまり、ドラッグが正しく開始され、自動スクロールが機能します）。_findRelativeOffsetへのmozillaスニッフィングパッチも試しましたが（それはそれだったと思います）、役に立ちませんでした。
私のユースケースに役立ったのは、（helper: 'clone'ドラッグ可能なコンストラクターで）クローンを使用してドラッグすることでした。クローンが存在しないように見せるために、可視性を非表示に設定してから元に戻すだけのstartメソッドとstopメソッドを追加しました。
上記でコメントしたと思いますが、まだポイントがありません。
この問題を抱えた将来の読者のために。jqueryui 1.8 から 1.10.3 にアップグレードしたところ、CSS の修正なしで問題が解決しました。
また、jquery 1.8 から 1.10.2 にアップグレードしました
あなたの努力を要約し、完全な解決策を提供するため。以下は、Chrome 40+ および Firefox 30+ で機能するようです。
var isFirefox = /firefox/.test(navigator.userAgent.toLowerCase());
$('#target').sortable({
connectWith: '#target-holder .elements',
handle: ".element-header",
start: function(ev, ui) {
if( isFirefox ) {
ui.item.css('margin-top', $(window).scrollTop() );
}
},
sort: function(ev, ui) {
if( isFirefox) {
ui.helper.css({'top' : ui.position.top - $(window).scrollTop() + 'px'});
} else {
ui.helper.css({'top' : ui.position.top + $(window).scrollTop() + 'px'});
}
},
beforeStop: function (ev, ui) {
if( isFirefox ) {
ui.item.css('margin-top', 0 );
}
}
});
私の解決策：「位置：相対」を追加する「.sortable」
$(".sortable").sortable({
sort: function(event, ui) {
ui.position.top = ui.position.top + $(window).scrollTop();
},
});
PS は jQuery UI 1.12.0 と jQuery 2.2.4 を使用