仿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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 127,693评论 18 546
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 74,786评论 12 116
  • 好久都没在园子里散步了。 看到微信运动信息上一个点赞,3千多步,不配,索性下楼。这半年,只因暑假在园里走多...
    安心安阅读 175评论 0 0
  • 今天是她的生日 啪~~~ 一阵拉出彩带的响声 她是他喜欢的女孩 追她很久了 每一天都在给她制造不同的惊喜 但她仍然...
    糜伊阅读 32评论 0 1
  • 电影里外国人收到礼物时一定是立马打开,当着送礼人的面夸张地尖叫感叹,以示自己受宠若惊。 电影里外国人收到礼物时一定...
    当局者醚阅读 248评论 1 1