因为公司项目需求,所以需要模仿Worktile和Teambition里面的拖拽效果,在网上找了一下午终于找到合适的插件,使用后发现非常好用,总结了一些使用方法分享给大家
html代码:
<div id="container">
<div class="project">
<h2 class="project_title">项目1</h2>
<ul class="project_list">
<li>内容1-1</li>
<li>内容1-2</li>
<li>内容1-3</li>
<li>内容1-4</li>
</ul>
</div>
<div class="project">
<h2 class="project_title">项目2</h2>
<ul class="project_list">
<li>内容2-1</li>
<li>内容2-2</li>
<li>内容2-3</li>
<li>内容2-4</li>
</ul>
</div>
<div class="project">
<h2 class="project_title">项目3</h2>
<ul class="project_list">
<li>内容3-1</li>
<li>内容3-2</li>
<li>内容3-3</li>
<li>内容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 大模块内的小模块的包裹层class名称
new Sortable(el, { group: 'photo' });
});
})();
</script>
插件示例打包下载,地址请戳我 密码:ku3w