最近项目里面要实现需要实现一个拖拽功能,自己实现很麻烦,就在网上找到了一个封装好的sortable函数,github(https://github.com/SortableJS/Sortable).
首先是依赖的引入:(也可以自己下载源代码导入,方式很多呢)
<body><!-- Latest compiled and minified CSS --><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/><!-- Latest Sortable --><script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
</body>
导入了依赖文件后,调用起来也十分方便.
// 只需在需要的在<script>中输入以下代码即可实现拖拽,排序功能.
<body>
<div id='sortTrue' class="list-goup"><div class="list-group-item">foo</div><div class="list-group-item">bar</div><div class="list-group-item">baz</div>
</div>
<div id="sortFalse" class="list-group"><div class="list-group-item">qux</div><div class="list-group-item">quux</div>
</div>
<script>Sortable.create(‘sortTrue’，{group:' sorting',sort: true});Sortable.create(sortFalse, {group: "sorting",sort: false});
</div>
</body>
上述代码创建了2个list,可以把sortTrue内的元素拖拽到sortFalse里面(反之也成立),因为它们属于同一个分组(group:‘sorting’),区别在于,
sortTrue内的元素可以在组内拖动排序(srot:true).srotFalse内的元素不允许拖动排序(sort:false).
还有很多有趣的功能,具体参考官方github:https://github.com/SortableJS/Sortable. 文档说明
