我如何实现一个触摸敏感，响应，可sorting的列表支持拖放Bootstrap？
我有一个<ul>列表，我想进行sorting（拖放）。 如何在现代浏览器和触摸设备上使用Bootstrap 3？
我试图使用jqueryuisorting与http://touchpunch.furf.com/ ; 它似乎工作，但它是hacky和jQueryUI不能很好地与Bootstrap。
如何在添加触摸屏支持时避免Bootstrap / jQueryUI冲突？
在这之前发布的答案令人惊讶地过时了。
rubaxa-sortable是一个快速，无需依赖的小型可重新configuration列表小部件，支持与HTML5原生拖放API一起使用的触摸支持。 您可以将它与Bootstrap，Foundation或任何您想要的CSS库一起使用，并且仅实例化它只需要一行。
它支持在列表或列表中重新sorting。 您可以定义只能接收元素的列表，或者可以拖动但不能拖放的列表。 这也是非常积极的维护和麻省理工学院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>
只是以为我会发布一个补充答案来自@KyorCode。 我遵循他的build议，并使用JQuery Sortable ，它为我工作无缝。 花了我10分钟才能完成这个工作。
我不需要包含任何JQuery UI CSS，只需要JavaScript就可以了，所以CSS在与Bootstrap冲突方面没有任何问题。
工作示例：
这是www.bootply.com上的一个工作示例 。
HTML：
<!-- Bootstrap 3 panel list. --> <ul id="draggablePanelList" class="list-unstyled"> <li class="panel panel-info"> <div class="panel-heading">You can drag this panel.</div> <div class="panel-body">Content ...</div> </li> <li class="panel panel-info"> <div class="panel-heading">You can drag this panel too.</div> <div class="panel-body">Content ...</div> </li> </ul>
JavaScript的：
您可以下载JQuery Sortable，而无需在页面中包含整个JQuery UI 。
<!-- Assumes that JQuery is already included somewhere. Size: 22kb or 13kb minified. --> <script src="/Scripts/jquery-ui-1.10.4.custom.js"></script> <script type="text/javascript"> jQuery(function($) { var panelList = $('#draggablePanelList'); panelList.sortable({ // Only make the .panel-heading child elements support dragging. // Omit this to make the entire <li>...</li> draggable. handle: '.panel-heading', update: function() { $('.panel', panelList).each(function(index, elem) { var $listItem = $(elem), newIndex = $listItem.index(); // Persist the new indices. }); } }); }); </script>
CSS：
<style type="text/css"> /* show the move cursor as the user moves the mouse over the panel header.*/ #draggablePanelList .panel-heading { cursor: move; } </style>
HTH
