仿Worktile和Teambition拖拽效果

因为公司项目需求，所以需要模仿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