如何为Bootstrap实现支持拖放的触摸式、响应式、可排序列表？
如何为Bootstrap实现支持拖放的触摸式、响应式、可排序列表？
提问于 2013-12-06 20:56:03
我有一个<ul>列表，我想让它可排序(拖放)。我怎样才能让它在现代浏览器和触控设备上与Bootstrap 3一起工作？
我正在尝试将jqueryui-sortable与http://touchpunch.furf.com/结合使用；它似乎可以工作，但它很麻烦，而且jQueryUI与Bootstrap的配合也不是很好。
如何在添加触摸屏支持时避免Bootstrap/jQueryUI冲突？
回答 1
Stack Overflow用户
发布于 2014-12-01 11:33:20
在此之前发布的答案令人惊讶地过时了。
rubaxa-sortable是一个快速的，无依赖的，小的可重排序的列表小部件，支持触摸，与HTML5原生的拖放应用程序接口一起工作。您可以将其与Bootstrap、Foundation或任何您想要的CSS库一起使用，实例化它只需要一行代码。
它支持列表内或列表之间的重新排序。您可以定义只能接收元素的列表，也可以定义可以拖动但不能拖放到其中的列表。它也是非常活跃的维护和MIT licensed on GitHub。
new Sortable(document.getElementsByClassName('sortable')[0]);<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Sortable -->
<script src="https://rawgit.com/RubaXa/Sortable/master/Sortable.js"></script>
<ul class="list-group sortable">
<li class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></li>
<li class="list-group-item">It works with Bootstrap...</li>
<li class="list-group-item">...out of the box.</li>
<li class="list-group-item">It has support for touch devices.</li>
<li class="list-group-item">Just drag some elements around.</li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20424477
复制相关文章
相似问题