dragula 一个 JavaScript 库，实现了网页上的拖放位置

如图，把上面红蓝色拖放到下面

 

使用方法比较简单，如下代码：

<link href='dist/dragula.css' rel='stylesheet' type='text/css' />
<script src='dist/dragula.js'></script>

<div id="left1" style="height:320px; width:1200px; background:#fff;">
    <div style="height:120px; width:120px; background:#ddd;"></div>
    <div style="height:120px; width:120px; background:#eee;"></div>
</div>

<div id="right1" style="height:320px; width:1200px; background:#f60;">
    <div style="height:120px; width:120px; background:#ddd;"></div>
    <div style="height:120px; width:120px; background:#eee;"></div>
</div>

<script>
dragula([document.getElementById('left1'), document.getElementById('right1')]);
</script>

 

下面排序demo支持手机端，但不支持长按再移动，只能轻按移动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            height:100px;
            background-color:#ddd;
        }
        .box2{
            height:100px;
            background-color:#f60;
        }
        .box3{
            height:100px;
            background-color:#666;
        }
    </style>
    <link rel="stylesheet" href="dragula-master/dist/dragula.min.css">
</head>
<body>
<div id="containers">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
<script src="dragula-master/dist/dragula.min.js" charset="utf-8"></script>
<script type="text/javascript">
    var drake = dragula([document.querySelector('#containers')])
</script>
</body>
</html>

 

 

源码下载：

https://github.com/bevacqua/dragula?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

 

posted @ 2017-03-06 17:50  James2019  阅读(920)  评论(0)  编辑  收藏  举报