點擊和重新排序

Question

目前正在使用點擊和重新排序功能，我可以使用一些幫助。

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

本質上，當您單擊3個列表項目之一時，它會顯示在列表左側的內容框中。在項目被分類到內容框之後，列表重新排序。

| 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，分配一個click處理程序來你有名單的li的，並點擊，移動li到ul內容區域。

$('#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>