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。

＆＃13;

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

＆＃13;

body {
  display: flex;
}

＆＃13;

<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>

＆＃13;

单击并重新排序

1 个答案: