javascript - 通过单击鼠标移动屏幕项目的顺序

Question

我的屏幕上有一个简单的项目列表:

1. 第 1 项
2. 第 2 项
3. 第 3 项

我见过用户可以单击某个项目并用鼠标更改其在列表中的位置的示例。

Mu的问题是，这是如何做到的？它是某种 JavaScript 函数吗？

Answer 1

您可以使用jQuery Ui library轻松完成此任务。按照这个片段进行操作

  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { background:#aeaeae; margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }

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

  <script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
  </script>

 
<ul id="sortable">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
</ul>