0

私にはulと呼ばれるがあり、その中には と呼ばれる.productsの束があります。li.product

それぞれliにdata-id、データベース内の製品の ID が付いた があります。

ユーザーが「上に移動」または「下に移動」をクリックすると、その製品がリスト内の 1 スロット上または下に移動するように機能を構築しています。

$('.move-up').click(function(event) {
  event.preventDefault();
  var shownFieldsArray = $.makeArray($('.products'));

  var currentIndex = $(shownFieldsArray).index($(event.currentTarget).parent());
  shownFieldsArray.move(currentIndex, (currentIndex - 1));

 // now I need to do something with the reordered shownFieldsArray

});

Move古い値と新しい値を取り、それに応じて物事を移動するArrayプロトタイプの関数（関数を使用した別のSO回答へのリンク）です。

$('.products')だから私の質問は次のとおりです。ユーザーが視覚的に確認できるように、の値を新しい並べ替えられたリストに置き換えるにはどうすればよいですか? アイテムを削除して再度追加する必要がありますか、またはの代わりのようなものがあり.val()ますか?

4

2 に答える 2

0

スワップする 2 つの要素は隣接する兄弟であるため、上記のいずれかを行う必要はありません。次のように簡単です。

$('.move-up').click(function(event) {
  event.preventDefault();
  $(this).after($(this).prev());
});

.prevこれが行うことは、クリックされた項目自体 ( ) の後に、クリックされた項目の前の兄弟 ( ) を挿入すること.afterです。前の兄弟は DOM に既に存在する要素であるため、ドキュメントの次の節が関連しています。

この方法で選択された要素が DOM の別の場所に挿入された場合、その要素は複製ではなく移動されます。

于 2013-08-12T22:59:31.547 に答える
0

このために、jQuery UI を利用します

jquery uiでの並べ替え

これにより、すでに持っている製品で簡単に再注文でき、保存したときに次のようにするだけです。

var array = []
$('.products').each(function(){
  array.push($(this).attr('data-id');
});

これはかなり一般的な例にすぎません。コードを見て、コードを複雑にしすぎているように感じます。このようにして、彼らは非常に簡単に並べ替えることができます。

jQuery UI ドキュメントはかなり詳細であり、それを使ってできることはたくさんあります。時間のかかる JS 関数のいくつかを邪魔にならないようにするための便利で簡単な方法です。

于 2013-08-12T23:05:21.750 に答える