0

データをhtmlの2つの異なるリストに分割する必要がある非常に特殊なケースがあります。このような：

<ul id="first_list">
    <li ref="1">The quick brown</li>
    <li ref="2">My father works</li>
</ul>

2 番目のリストは次のようになります。

<ul id="second_list">
    <li ref="1">jumps over the lazy dog</li>
    <li ref="2">at the Ministry of Defense</li>
</ul>

したがって、「ref」属性からわかるように<li>、2 番目のリストのどの要素が最初のリストのどの要素の続きであるかがわかり<li>ます。

これらのリストに対して jQuery UI sortable() を有効にする必要がありますが、最初のリストを並べ替えるときは、2 番目のリストも並べ替える必要があります。ハンドルを使用してみましたが、ハンドル要素が移動する要素内にある必要があるように見えますが、これら2つはページの別の場所にあるため、機能しません。

4

1 に答える 1

0

コードの一部 (試したこと) を共有する必要があると思います。また、使用している Sortable プラグインに精通していると思います。Sortable の成功イベントで以下のコードを実行して、LI をソートするとすぐに他のリストもソートされるようにする必要があります。いずれかの方法、

これを試して：

//This line stored the LIs in a temp variable and remove it
var $cachedList = $('<div />').html($('#second_list').html());
$('#second_list > li').remove();

//This line loads up the first UL's LIs and replaces the content for each LI 
//using $cachedList. 
$('#second_list').html($('#first_list').html()).find('li').each(function () {
    $(this).html($cachedList.find('li[ref="'+$(this).attr('ref')+'"]').html());
});

デモ: http://jsfiddle.net/AR8px/

于 2012-04-06T13:16:31.983 に答える