2

ページ内にネストされたメニューがあり、ドラッグ アンド ドロップを使用してメニュー項目を並べ替えたりネストしたりできます。

問題があるようです (jQuery 1.7.2 と UI 1.8.22 を使用しています)。並べ替え可能とドロップ可能の両方がある場合、並べ替えの許容範囲が一貫しておらず、問題が発生しています。

例は、私ができるよりもうまく説明しようとしています...

http://jsfiddle.net/8fUxV/5/

ネストされたメニューではなく、問題を機能させるために使用しているメカニズムだけを表示するために必要な最小限のものを作成しました。

「アイテム 4」を持ち上げて、ゆっくりと上にドラッグします。3 が強調表示されます。これは、ドロップのターゲットであることを意味します。いいですが、2 と 3 の間のギャップになるまで上に移動し続けます。しかし、そうすると、3 がまだ強調表示されているため、代わりに「ドロップ」します (実際のコードでは、ネストされたメニューを作成します)。

実際には項目 2 の直前にいくつかのピクセルがあり、ここで目的の効果を得ることができます。ただし、下に移動しすぎると、ソートされずに再びドロップします。

基本的に、問題は、アイテムがギャップにある場合、並べ替えて、他の強調表示されたアイテムの上にあるときにのみドロップする必要があると思うことです。

UIに位置を再計算させる部分的な回避策があります-「out」関数のコードのコメントを外します。

4 を上にドラッグしても同じ問題が発生しますが、2 に触れてギャップに戻ると、何も強調表示されないため、正しくソートされます。

しかし、最初の再配置で期待するように、最初のドラッグが機能しないという問題が残ります。

（jquery.uiコードのui.sortableの_mousedragに回避策を追加しようとしましたが、問題は解決しました....しかし、そこで何をしているのかわかりません:)

それで、私が何か間違ったことをしているのか、それともバグなのかわかりませんか?

バグレポートをログに記録する前に、似たようなことに遭遇した人はいますか?

4

1 に答える 1

3

ソースを掘り下げた後、問題を修正するオプションを見つけました。

問題は、アイテムが移動され、ダミーのプレースホルダーがリスト内に挿入されると、位置が正しく計算されないことです。

これをソート可能に追加する必要があります。

refreshPositions: true

例えば

$("ul").sortable({
    helper: "original",
    refreshPositions: true,
    update: function(event, ui) {
       :
    }
});

これにより、マウスの動きごとに位置が再計算されます。非常に非効率的ですが、それ以外の場合は機能しません。

于 2012-08-08T19:52:55.970 に答える