我有一个< ul>列表,我想做排序(拖放)。我如何让它在现代浏览器和触摸设备中使用Bootstrap 3?
我试图使用jqueryui-sortable结合http://touchpunch.furf.com/;它似乎工作,但它是hacky和jQueryUI不玩好Bootstrap。
解决方法
在这之前发布的答案惊人地过时。
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>