无涯教程-jQuery - Sortable排序函数能够排序功能可与JqueryUI中的交互配合使用。此功能可在任何

能够排序功能可与JqueryUI中的交互配合使用。此功能可在任何DOM元素上启用可排序功能。单击并将其拖动到列表中的新位置，其他项将调整以适合。默认情况下，可排序项目共享可拖动属性。

Sort able - 语法

$(function() {
   $( "#sortable" ).sortable();
   $( "#sortable" ).disableSelection();
});

Sort able - 示例

以下是一个简单的示例，显示了sortable的用法-

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Sortable - Default functionality</title>
      <link rel="stylesheet" 
         href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> 
     </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">
	
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> 
     </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">

  </span><span class="tag">&lt;style&gt;</span><span class="pln">
     </span><span class="com">#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }</span><span class="pln">
     </span><span class="com">#sortable li { margin: 0 3px 3px 3px; padding: 0.4em;</span><span class="pln">
        padding</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.5em</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.4em</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">18px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
     </span><span class="com">#sortable li span { position: absolute; margin-left: -1.3em; }</span><span class="pln">
  </span><span class="tag">&lt;/style&gt;</span><span class="pln">
	
  </span><span class="tag">&lt;script&gt;</span><span class="pln">
     $</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        $</span><span class="pun">(</span><span class="pln"> </span><span class="str">"#sortable"</span><span class="pln"> </span><span class="pun">).</span><span class="pln">sortable</span><span class="pun">();</span><span class="pln">
        $</span><span class="pun">(</span><span class="pln"> </span><span class="str">"#sortable"</span><span class="pln"> </span><span class="pun">).</span><span class="pln">disableSelection</span><span class="pun">();</span><span class="pln">
     </span><span class="pun">});</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">

</head>
<body>
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"sortable"</span><span class="tag">&gt;</span><span class="pln">
     </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-state-default"</span><span class="tag">&gt;&lt;span</span><span class="pln"> 
        </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-icon ui-icon-arrowthick-2-n-s"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">Item 1</span><span class="tag">&lt;/li&gt;</span><span class="pln">
     </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-state-default"</span><span class="tag">&gt;&lt;span</span><span class="pln"> 
        </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-icon ui-icon-arrowthick-2-n-s"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">Item 2</span><span class="tag">&lt;/li&gt;</span><span class="pln">
     </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-state-default"</span><span class="tag">&gt;&lt;span</span><span class="pln"> 
        </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-icon ui-icon-arrowthick-2-n-s"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">Item 3</span><span class="tag">&lt;/li&gt;</span><span class="pln">
     </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-state-default"</span><span class="tag">&gt;&lt;span</span><span class="pln"> 
        </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-icon ui-icon-arrowthick-2-n-s"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">Item 4</span><span class="tag">&lt;/li&gt;</span><span class="pln">
     </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-state-default"</span><span class="tag">&gt;&lt;span</span><span class="pln"> 
        </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-icon ui-icon-arrowthick-2-n-s"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">Item 5</span><span class="tag">&lt;/li&gt;</span><span class="pln">
     </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-state-default"</span><span class="tag">&gt;&lt;span</span><span class="pln"> 
        </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-icon ui-icon-arrowthick-2-n-s"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">Item 6</span><span class="tag">&lt;/li&gt;</span><span class="pln">
     </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-state-default"</span><span class="tag">&gt;&lt;span</span><span class="pln"> 
        </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-icon ui-icon-arrowthick-2-n-s"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">Item 7</span><span class="tag">&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">

</body>
</html>

这将产生以下输出-

无涯教程-jQuery - Sortable排序函数

Sort able - 语法

Sort able - 示例

参考链接