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

发布时间：2020-12-17 23:57:31 所属栏目：安全来源：网络整理

导读：我有一个 ul列表，我想做排序(拖放)。我如何让它在现代浏览器和触摸设备中使用Bootstrap 3？我试图使用jqueryui-sortable结合http://touchpunch.furf.com/;它似乎工作，但它是hacky和jQueryUI不玩好Bootstrap。如何在添加触摸屏支持时避免Bootstrap / jQue

我有一个< 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!