twitter-bootstrap - 如何为 Bootstrap 实现支持拖放的触摸敏感、响应式、可排序列表？

Question

我有一个<ul>我想要排序(拖放)的列表。如何让它在现代浏览器和触摸设备中与 Bootstrap 3 配合使用？

我正在尝试将 jqueryui-sortable 与 http://touchpunch.furf.com/ 结合使用;它似乎可以工作，但它很老套，而且 jQueryUI 与 Bootstrap 配合得不好。

在添加触摸屏支持时如何避免 Bootstrap/jQueryUI 冲突？

Answer 1

在此之前发布的答案令人惊讶地过时了。

rubaxa-sortable是一个快速、无依赖性、小型可重新排序的列表小部件，具有触摸支持，可与 HTML5 native 拖放 API 配合使用。您可以将它与 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>