twitter-bootstrap 如何为 Bootstrap 实现支持拖放的触敏、响应式、可排序的列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20424477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I implement a touch-sensitive, responsive, sortable list supporting drag & drop for Bootstrap?
提问by brk
I have a <ul>list that I want to make sortable (drag & drop). How can I get it to work with Bootstrap 3 in modern browsers and touch devices?
我有一个<ul>要排序的列表（拖放）。如何让它在现代浏览器和触摸设备中与 Bootstrap 3 一起使用？
I'm trying to use jqueryui-sortable combined with http://touchpunch.furf.com/; it seems to work, but it's hacky and jQueryUI doesn't play nice with Bootstrap.
我正在尝试将 jqueryui-sortable 与http://touchpunch.furf.com/结合使用；它似乎工作，但它是hacky 和jQueryUI 不与Bootstrap 一起玩。
How can I avoid Bootstrap/jQueryUI conflicts while adding touch-screen support?
如何在添加触摸屏支持时避免 Bootstrap/jQueryUI 冲突？
回答by Dan Dascalescu
The answers posted before this one are surprisingly outdated.
在此之前发布的答案令人惊讶地过时了。
rubaxa-sortableis a fast, no-dependencies, small reorderable lists widget with touch support that works with the HTML5 native drag&drop API. You can use it with Bootstrap, Foundation, or any CSS library you want, and instantiating it only takes one line.
rubaxa-sortable是一个快速的、无依赖的、小型的可重新排序的列表小部件，具有触摸支持，可与 HTML5 原生拖放 API 配合使用。你可以将它与 Bootstrap、Foundation 或任何你想要的 CSS 库一起使用，并且实例化它只需要一行。
It supports reordering within a list or across lists. You can define lists that can only receive elements, or lists from which you can drag, but onto which you cannot drop. It's also very actively maintained and MIT licensed on GitHub.
它支持在列表内或跨列表重新排序。您可以定义只能接收元素的列表，或可以从中拖动但不能放置的列表。它也在GitHub 上得到了非常积极的维护和MIT 许可。
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>回答by sheikhjabootie
Just thought I'd post a supplemental answer to the one from @KyorCode. I followed his advice and went with JQuery Sortableand it worked seamlessly for me. It took me maybe 10 minutes to get this working.
只是想我会发布对@KyorCode 的补充答案。我听从了他的建议并使用了JQuery Sortable，它对我来说是无缝的。我可能花了 10 分钟才开始工作。
I didn't have to include any JQuery UI CSS - just the JavaScript - so there were no issues with the CSS conflicting in anyway with Bootstrap.
我不必包含任何 JQuery UI CSS——只包含 JavaScript——所以 CSS 与 Bootstrap 没有任何冲突。
Working Example:
工作示例：
Here's a working exampleon www.bootply.com.
这是www.bootply.com 上的一个工作示例。
HTML:
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:
JavaScript：
You can download JQuery Sortable without including the whole of JQuery UIin your page.
您可以下载 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:
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
HTH
