Question

我有一个<ul>列表，我想让它排序（拖放）。如何在现代浏览器和触摸设备中使用Bootstrap 3？

我正在尝试使用jqueryui-sortable与http://touchpunch.furf.com/结合使用;它似乎工作，但它是hacky和jQueryUI不能很好地与Bootstrap。

如何在添加触摸屏支持时避免Bootstrap / jQueryUI冲突？

Answer 1

在此之前发布的答案令人惊讶地过时了。

rubaxa-sortable是一个快速，无依赖性的小型可重新排序列表小部件，具有触摸支持，可与HTML5本机拖放API配合使用。您可以将它与Bootstrap，Foundation或任何您想要的CSS库一起使用，并且实例化它只需要一行。

它支持在列表或列表中重新排序。您可以定义只能接收元素的列表，或者可以拖动但不能放置的列表。它也非常积极地维护并MIT licensed on GitHub。

＆＃13;

new Sortable(document.getElementsByClassName('sortable')[0]);

＆＃13;

<!-- 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>

＆＃13;

Answer 2

我以为我会从@KyorCode发布一个补充答案。我按照他的建议去了JQuery Sortable，它为我做了无缝的工作。我花了大概10分钟才能完成这项工作。

我没有必要包含任何JQuery UI CSS - 只需要JavaScript - 所以在使用Bootstrap的情况下CSS没有任何问题。

工作示例：

这是www.bootply.com上的working example。

<强> 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的：

您可以在页面中download JQuery Sortable without including the whole of 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

如何实现支持拖放的触敏，响应，可排序列表？为Bootstrap掉线？

2 个答案: