最近项目里面要实现需要实现一个拖拽功能,自己实现很麻烦,就在网上找到了一个封装好的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. 文档说明
