如图，把上面红蓝色拖放到下面
使用方法比较简单，如下代码：
<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