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

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

我试图使用jqueryui-sortable结合http://touchpunch.furf.com/;它似乎工作，但它是hacky和jQueryUI不玩好Bootstrap。

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

解决方法

在这之前发布的答案惊人地过时。

rubaxa-sortable是一个快速，无依赖，小的可重排列表小部件与触摸支持，与HTML5本机拖放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>