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

前端之家收集整理的这篇文章主要介绍了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>

猜你在找的Bootstrap相关文章