Нажмите и переустановите

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, назначить обработчик щелчка к 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>