0

ソート可能なリストに問題がありました。すべてのリストには、並べ替え可能な子がいくつかあります。また、すべての子をドラッグ可能にして、1 つの子をあるリストから別のリストにドロップできるようにします。sortable と draggable の両方を使用すると、それらは互いに上書きされ、そのうちの 1 つが無視されます。

現在、次のjQueryコードを取得しています。私の問題を説明する jsFiddle も作成しました。

// Set sortable to categories
$('.trade-in-template').sortable();
$('.trade-in-category-sub').sortable();
$('.trade-in-category-sub').children().draggable();

$( ".trade-in-category" ).droppable({
    drop: function( event, ui ) {
        var dragged = $(ui.draggable);
        var droppedOn = $(this);

        if (dragged.hasClass('trade-in-row'))
        {
            dragged.css('left', 0);
            dragged.css('top', 0);
            droppedOn.find('.trade-in-category-sub').append(dragged);
        }
    }
});

http://jsfiddle.net/a6Ftd/

4

2 に答える 2

2

どうやら、あなたの問題は Javascript の問題ではなく、CSS の問題でした。

ここで jsFiddle を更新しました。draggable私が言ったように、私はあなたとの宣言をコメントアウトしましたdroppable。それは一種の冗長です。私はそれを宣言の仕様に置き換えましconnectWithた。sortable

しかし、それでも、要素を左に浮かせて.trade-in-rowいるため、機能しません。

ドロップを防止する理由は、CSS で要素をフローティングすると、CSS ボックス モデル フロー (またはレイアウト、任意の名前) から要素が削除されるためです。その結果、親.trade-in-category-sub要素は高さに折りたたまれ0pxます。0px の高さでは、ソート可能オブジェクトを「ドロップ」するスペースがまったくありません。

接続されたソータブルではなく、現在のソータブルで機能する理由は、おそらくその実装に固有の jQuery UI コード領域です。私が間違っている場合、誰かがこれについて私を修正したいと思うかもしれません。

これをテストするために、関連する要素の境界を明確に示す CSS スタイルをコードに追加しました。

.trade-in-category-sub {
    border:1px solid red;
}

.trade-in-category-sub div {
    background:rgba(50,100,255,.5) !important;
}

そして、フロートも削除しました：

.trade-in-row {
    width: 95%;
    padding: 10px 0px 10px 5%;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
    /*float:left;*/    /* ### <------------------------------------- */
    cursor: -webkit-grab;
}

コメントを外して、私の言いたいことを確認してください。:)

于 2013-06-12T12:54:45.563 に答える
0

ここでnestedSortableを使用できると思います。

注: もうメンテナンスされていないようですが、1 年間使用しており、非常にうまく機能していることが証明されています。構成オプションは、ソート可能およびドラッグ可能と非常によく似ています。

于 2013-06-12T12:09:34.413 に答える