Dragula是一款支持移動觸摸屏設備的純js元素拖放插件。這個元素拖放插件使用簡單，瀏覽器兼容性好，能夠實現通過鼠標或在移動設備中通過手指來拖動DOM元素的位置。
代碼演示：
<script src="dist/dragula.js"></script>
<link rel="stylesheet" href="dist/dragula.css">
<script>
$(document).ready(function () {
dragula([shuffle]);//上面兩個插件務必引入
});
</script>
<style>
#shuffle {
margin: 30px;
padding: 0;
}
.shuffle-item {
text-align: left;
margin: 5px;
padding: 5px;
border: solid 1px rgba(11,128,238,0.05);
border-radius: 5px;
background-color: rgba(11,128,238,0.05);
color: black;
}
</style>
<div id="shuffle">
<div class='shuffle-item'>test 1</div>
<div class='shuffle-item'>test 2</div>
<div class='shuffle-item'>test 3</div>
<div class='shuffle-item'>test 4</div>
</div>頭文件dragula.js 和 dragula.css下載鏈接：
dragula的特點有：
- 設置非常簡單
- 沒有外部依賴
- 可以自動對數據進行排序
- 被移動項帶有半透明的視覺效果
- 支持移動觸摸設備
- 兼容性好，支持IE7+的所有現代瀏覽器
安裝
- 可以通過bower或npm來安裝該元素拖放插件。
npm install dragula --save
bower install dragula.js --save
使用方法
該元素拖動插件提供了一個最簡單的API來讓你可以在頁面中拖放元素。
dragula(containers, options?)
默認情況下，dragula允許用戶在containers中拖動一個元素，並將元素放置到containers列表的其它容器中。如果元素被放置在containers列表元素之外，插件將取消revertOnSpill和removeOnSpill選項。
注意：拖拽事件只會發生在用戶鼠標左鍵點擊的時候，並且沒有meta鍵被按下。如果點擊的是按鈕或超鏈接元素，拖拽事件也會被忽略。
下面的例子允許用戶將元素從left容器拖放到right容器，或從right容器拖放到left容器中。
dragula([left, right]);
- 配置參數
你也可以為它提供一些參數選項：
dragula(containers, {
moves: function (el, container) {
return true; // elements are always draggable by default
},
accepts: function (el, target, source, sibling) {
return true; // elements can be dropped in any of the `containers` by default
},
direction: 'vertical', // Y axis is considered when determining where an element would be dropped
copy: false, // elements are moved by default, not copied
revertOnSpill: false, // spilling will put the element back where it was dragged from, if this is true
removeOnSpill: false // spilling will `.remove` the element, if this is true
});options.moves：你可以定義一個moves方法，該方法在發生點擊的時候通過(el, container)參數進行調用。如果該方法返回的是false，拖拽事件將不會開始，事件也不會被阻止。
options.accepts：該方法確保一個來自source的元素el能夠在sibling元素之前放入到target容器之中。sibling元素可以為null，這會使元素被放置到容器的最后一個位置。注意：如果options.copy設置為true，el元素會被設置為一個副本，替代原始的拖放元素。
options.copy：如果copy設置為true，元素將被復制而不是拖動。注意下面的區別：
Event Move Copy
drag 元素從source中隱藏 Nothing happens
drop 元素將移動到target中 元素會被克隆到target中
remove 元素會從DOM中移除 Nothing happens
cancel 元素會停留在source中 Nothing happens
options.revertOnSpill：默認情況下，元素被拖放到容器之外會被放置到由 feedback shadow設定的投放點上。設置revertOnSpill為true將確保元素在拖放到容器之外時會被重新放置會拖放的開始位置。
options.removeOnSpill：設置removeOnSpill為true會使任何拖放到容器之外的元素被從DOM中移除。注意：如果copy設置為true，remove事件將不會觸發。
options.direction：當元素被拖放到一個容器中，它將被放置到最接近鼠標位置的點上。如果direction設置為vertical，將會使用Y軸坐標作為參考帶你，如果設置為horizontal會使用X軸坐標作為參考點。
事件
drake.end()：使用最后位置的預覽陰影標記最為拖放的目的地拖放元素。相應的cancel或drop事件將被觸發。
drake.cancel(revert)：如果被drake管理的元素是當前被拖放的元素，這個方法會取消拖放事件。你也可以在該方法的調用級別中傳入revert參數，效果與revertOnSpill設置為true相同。注意：一個"cancellation"將在下面的場景中會返回一個"cancel"事件：
revertOnSpill設置為true
放置的目標（半透明的預覽圖）在source容器中，並且元素被放置到相同的容器中。
drake.remove()：如果被drake管理的元素是當前被拖放的元素，該方法會將元素從DOM中移除。
drake.on (Events)：drake是一個事件發送器。下面的事件可以使用drake.on(type, listener)來跟蹤。
事件名稱 參數 描述
drag el, container el從container中被拖拽
drop el, container, source el被放置到container中，它來自source
cancel el, container el被拖動但仍在原處，並最終回到container
remove el, container el被拖動但仍在原處，並最終被從DOM中移除。
shadow el, container el是拖放目的地的半透明預覽，它會移動到container中。
drake.destroy()：移除所有的拖放事件。如果.destroy在一個元素被拖動時觸發，拖動將不會有效果。