因?yàn)楣卷?xiàng)目需求，所以需要模仿Worktile和Teambition里面的拖拽效果龄坪，在網(wǎng)上找了一下午終于找到合適的插件倦青，使用后發(fā)現(xiàn)非常好用图毕，總結(jié)了一些使用方法分享給大家
html代碼：
<div id="container">
<div class="project">
<h2 class="project_title">項(xiàng)目1</h2>
<ul class="project_list">
<li>內(nèi)容1-1</li>
<li>內(nèi)容1-2</li>
<li>內(nèi)容1-3</li>
<li>內(nèi)容1-4</li>
</ul>
</div>
<div class="project">
<h2 class="project_title">項(xiàng)目2</h2>
<ul class="project_list">
<li>內(nèi)容2-1</li>
<li>內(nèi)容2-2</li>
<li>內(nèi)容2-3</li>
<li>內(nèi)容2-4</li>
</ul>
</div>
<div class="project">
<h2 class="project_title">項(xiàng)目3</h2>
<ul class="project_list">
<li>內(nèi)容3-1</li>
<li>內(nèi)容3-2</li>
<li>內(nèi)容3-3</li>
<li>內(nèi)容3-4</li>
</ul>
</div>
</div>
JavaScript代碼：（注釋和配圖為使用方法）
<script type="text/javascript" src="js/Sortable.js"></script>
<script type="text/javascript">
var container = document.getElementById('container'); //獲取最外層包裹層
(function (){
new Sortable(container, { //需要包裹層的位置1
draggable: '.project', //大模塊class名稱
handle: '.project_title' //大模塊頭部class名稱
});
[].forEach.call(container.getElementsByClassName('project_list'), function (el){ //需要包裹層的位置2 大模塊內(nèi)的小模塊的包裹層class名稱
new Sortable(el, { group: 'photo' });
});
})();
</script>
插件示例打包下載，地址請(qǐng)戳我 密碼：ku3w
