クリックと並べ替え

Question

現在、クリックと並べ替え機能を使用しています。

|   | list item 1 
| content | list item 2 
|   | list item 3 

3つのリストアイテムの1つをクリックすると、リストの左側にあるコンテンツボックスに表示されます。アイテムがコンテンツボックスにソートされると、リストの順序が変わります。

| list item 2 | list item 1 
| content | list item 3 
|    | 

私がこれまで持っていることは次のとおりです。

<li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 

<script> 
    jQuery("li").click(function() { 
    jQuery(this).parent().prepend(jQuery(this)); 
}); 
</script> 

任意の洞察力は非常に参考になります。前もって感謝します。

Answer 1

あなたのコンテンツ領域の空きulを作成し、あなたが持っているリストのli年代にクリックハンドラを割り当て、クリック時に、コンテンツ領域にulにliを移動します。

$('#plist li').on('click', function() { 
 
    var $contentli = $('#contentli'); 
 
    $contentli.find('li').appendTo($('#plist')); 
 
    $(this).prependTo('#contentli'); 
 
})

body { 
 
    display: flex; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="content"> 
 
    <ul id="contentli"> 
 
    <li>1</li> 
 
    </ul> 
 
    <h1>content</h1> 
 
</div> 
 

 
<ul id="plist"> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
</ul>