0

ここでの例を出発点として使用して、ドラッグ可能でソート可能なデータをカスタマイズすることに着手しました。リンクされた例では、ドラッグ可能なテキストに単純なテキストがあります。選択タグに置き換えました。

選択要素をソート可能リストにドラッグするとき、選択したオプションの値のみをソート可能リストに移動するときに使用したいと思います。この目的のために、私はカスタムヘルパーを使用しますが、残念ながら、それをドロップするとすぐに、再びselect要素に変わります。

$("#draggable").draggable({
   connectToSortable: "#sortable",
   opacity: 0.8,
   cursor: "move",
   helper: function () {
       return $("<div>" + $(this).text() + "</div>");
   },
   distance: 20
});

どうすればこれを修正できますか？見てくれてありがとう。JSFiddleはここにあります：

PS：droppableからすべてのクラスを削除しても効果はなく、グループ内での並べ替えにも影響するため、これは間違ったアプローチです。

$("#sortable").droppable({
   drop: function (event, ui) {
       alert('dropped');
       $(ui.draggable).removeClass();
   },
   activeClass: "ui-state-hover",
   hoverClass: "ui-state-active"
});
4

1 に答える 1

0

少し複雑な解決策ですが、ここに行きます：

まず、ドラッグ可能なカスタムヘルパー関数を変更しました。探しているクラスを見つけて、最初のインスタンス（li）のみを複製しますが、それにすべてのリストボックスのテキストを追加します。これは、fcbkcompleteの設計によるものです。とにかく、今は単一のリスト項目と必要なテキストが残っています。ui-state-defaultクラスをクローンに追加すると、ここで完了です。

                $("#draggable").draggable({
                distance: 10,
                cursor: "move",
                helper: function (e, ui) {
                    var newListItem = $(this).find('.bit-box').first().clone().removeClass().addClass("ui-state-default");
                    var fullCommand = "";
                    $(this).find('.bit-box').each(function( index ) {
                        fullCommand += $(this).text() + " ";
                    });

                    newListItem.text(fullCommand);
                    return (newListItem);
                },
                revert : true
                });

ドロップ可能では、ドロップイベントを処理することになりましたが、今回は、ui.draggableの代わりにui.helper.cloneを使用しました。

                $("#container").droppable({
                accept: '.product',
                drop: function (event, ui) {
                    var x = ui.helper.clone();
                    x.removeClass().attr('style', '');
                    x.addClass("ui-state-default");
                    x.appendTo('#container');
                    ui.helper.remove();
                }
            });

wrt cssを修正する必要のあるエラーがまだいくつかありますが、これは今のところ期待どおりに機能します:)

于 2013-01-16T10:31:08.300 に答える