2

独自のネストされた ul-tree メニューを作成しました。jQuery の sortable() と droppable() を使用して、複数のレベルでも、ツリーの li-items はソート可能です。ドラッグアンドドロップするだけです。

したがって、私の問題は、アイテムを他のアイテムdroppable（）のゾーンにドラッグすると、「sortable（）プレースホルダー」と「droppable（）hoverClass」の両方が強調表示されることです。

ここに私の現在のコードがあります:

http://jsfiddle.net/PeterWesterlund/8KDur/89/

質問: droppable() ホバーがトリガーされたときに、ソート可能なプレースホルダーが強調表示されないようにするにはどうすればよいですか?

そのため、選択したアイテムが配置される場所のみが強調表示されます。

4

4 に答える 4

2

まったく同じ問題がありました。私の解決策は

ソート可能

$(".scrollPane", ui).sortable({
    //...
    placeholder: "ui-state-highlight myPlaceholder"
})

ドロップ可能

$( container ).droppable({
    //...
    over: function( event, ui ){
        $(this).parent().addClass("hide-placeholder")
    },
    out: function( event, ui ){
        $(this).parent().removeClass("hide-placeholder")
    }
})

CSS(レス)

.hide-placeholder{
    .myPlaceholder {
        visibility:hidden;/*display:none*/
    }
}

これらの異なる d&d コンセプトの間にも何らかの統合/コミュニケーションがあればいいのにと思います。

于 2013-10-02T14:45:36.687 に答える
1

私は現在この問題を経験しており、説明するためにこの gif を作成しました。

ソート可能 + ドロップ可能

最初に接続された Sortable の上 (およびおそらく最後のソータブルの下) にドラッグしてもプレースホルダーが消えないのは本当に面倒ですが、これは仕様によるものだと思います。上部の Droppable でドラッグしたアイテムを離すと、視覚的には Culture セクションの最初のアイテムになりますが、プログラムでは Issue Cover に設定され、People セクションの元の位置に戻ります。

CSS を使用してプレースホルダーを非表示にしたり、JS を使用してプレースホルダーを削除したりしても、jQUI の内部を利用するなどのハックを使用しても修正されないオフセットのみが作成されます。$.ui.ddmanager.prepareOffsets($.ui.ddmanager.current, null);

于 2014-06-10T16:21:13.500 に答える
0

あなたが求めていることを完全に理解しているかどうかはわかりませんが、プロパティを使用するtolerance: "fit"ことで、ドロップの処理方法にさまざまな許容値を設定できます。

JSFiddle

可能なオプションのリストは次のとおりです。

許容範囲

ドラッグ可能オブジェクトがドロップ可能オブジェクトの上にあるかどうかをテストするために使用するモードを指定します。可能な値: 'fit'、'intersect'、'pointer'、'touch'。

fit: ドラッグ可能な部分がドロップ可能な部分に完全に重なる 交差: ドラッグ可能な部分がドロップ可能な部分に少なくとも 50% 重なっている pointer: マウスポインタがドロップ可能な部分に重なっている

コード例

許容オプションを指定してドロップ可能オブジェクトを初期化します。 $( ".selector" ).droppable({ tolerance: "fit" }); init 後の許容範囲オプションを取得または設定します。

//getter

var tolerance = $( ".selector" ).droppable( "option", "tolerance" );

//setter

$( ".selector" ).droppable( "option", "tolerance", "fit" );

詳細については、こちらのオプションを参照してください。

于 2012-08-10T17:53:21.877 に答える