3

私はjQueryを初めて使用し、jQueryUIの並べ替え可能なオプションに苦労しています。

削除アイコンをクリックすると、選択されていない領域にDVDが追加され、アイコンがプラス（+）に変わります。

次に、選択されていない領域のプラスアイコンをクリックすると、アイテムが「追加された領域」に移動し、アイコンが「ビン」に変わります。

あるdivから別のdivにアイテムをドラッグアンドドロップする場合と同じ原則。アイコンが含まれているdivに応じて切り替える必要があります。

ここにデモがあります：-

http://jsfiddle.net/w3vvL/3/

$("#gallery").sortable({
   connectWith: "#trash"
   });
   $("#trash").sortable({
   connectWith: "#gallery"

}）;

ヘルプ/ポインタは素晴らしいでしょう。

4

1 に答える 1

4

アイコンの最初の問題は、アイテムが入っているコンテナにアイコンを依存させることで解決されます。これにより、アイコンを気にする必要がなくなるため、追加および削除機能の実装も簡単になります。

そこで、選択した領域にクラスを追加し、リンクの、、およびクラスを.selected置き換え、次のスタイルを追加しました（jquery UIからコピーしたばかりです）。.icon-trash.icon-plusdeleteadd

.dvdlist a { /* plus */
    background-position: -16px -128px;
}
.selected a { /* trash */
    background-position: -176px -96px;
}

2番目の問題は、単純なクリックハンドラーによって解決されます。

$('.delete, .add').on('click', function() {
    item = $(this).parent();
    item.fadeOut(function() {
        if (item.parent().attr('id') == 'trash') {
            $('#gallery').append(item.fadeIn());
        } else {
            $('#trash').append(item.fadeIn());
        }
    });
});

私はあなたのフィドルを更新しました：http：//jsfiddle.net/w3vvL/11/

于 2013-03-21T17:52:45.663 に答える