javascript - 点击并重新排序

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>