Sortable可以對HTML物件做拖曳移動清單的JavaScript函式庫，支援行動裝置且不依賴jQuery等其他第三方，並相容Bootstrap等CSS框架

GitHub Star: 12,000
Javascripting Overall: 91%
瀏覽器: Chrome、Firefox和IE9+
RWD: 不支援(可運作)
License: MIT

《安裝》

• CDN

    <!-- Sortable v1.6.1/ -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.6.1/Sortable.min.js"></script>
  

• npm

    $ npm install sortablejs --save
  

• Bower

    $ bower install --save sortablejs
  

《範例》

• 可拖曳的項目

    <div class="example">
    	<ul id="items">
    		<li class="item">li 1</li>
    		<li class="ignore">li 2(ignore)</li>
    		<li class="item">li 3</li>
    		<li class="item">li 4</li>
    	</ul>
    </div>
    <script>
    	var el = document.getElementById( "items" );
    	Sortable.create(el, {
    		// 參數設定[註1]
    		disabled: false, // 關閉Sortable
    		animation: 150,  // 物件移動時間(單位:毫秒)
    		handle: ".example",  // 可拖曳的區域
    		filter: ".ignore",  // 過濾器，不能拖曳的物件
    		preventOnFilter: true, // 當過濾器啟動的時候，觸發event.preventDefault()
    		draggable: ".item",  // 可拖曳的物件
    		ghostClass: "sortable-ghost",  // 拖曳時，給予物件的類別
    		chosenClass: "sortable-chosen",  // 選定時，給予物件的類別
    		forceFallback: false  // 忽略HTML5 DnD
    	});
    </script>
  

  [註1]

  參數	描述

  disabled|關閉Sortable
  animation|物件移動時間(單位:毫秒)
  handle|可拖曳的區域
  filter|過濾器，不能拖曳的物件
  preventOnFilter|當過濾器啟動的時候，觸發event.preventDefault()
  draggable|可拖曳的物件
  ghostClass|拖曳時，給予物件的類別
  chosenClass|選定時，給予物件的類別

《延伸》

1. Sortable. No jQuery.
2. RubaXa/Sortable: Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React, Polymer, Knockout and any CSS library, e.g. Bootstrap.