Как я могу реализовать сенсорный, отзывчивый, сортируемый список, поддерживающий drag & drop для Bootstrap?

У меня есть список <ul>, который я хочу сделать sortable (перетаскивание). Как я могу заставить его работать с Bootstrap 3 в современных браузерах и сенсорных устройствах?

Я пытаюсь использовать jqueryui-sortable в сочетании с http://touchpunch.furf.com/; он работает, но он взломан, и jQueryUI не играет хорошо с Bootstrap.

Как я могу избежать конфликтов Bootstrap/jQueryUI при добавлении поддержки сенсорного экрана?

Ответ 1

Ответы, опубликованные до этого, неожиданно устарели.

rubaxa-sortable - это быстро, нет -зависимости, небольшой виджет с перезаписываемыми списками с поддержкой касаний, который работает с собственным API-интерфейсом drag & drop. Вы можете использовать его с Bootstrap, Foundation или любой библиотекой CSS, которую вы хотите, и для ее создания требуется только одна строка.

Он поддерживает переупорядочение в списке или в списках. Вы можете определить списки, которые могут получать только элементы или списки, из которых вы можете перетаскивать, но на которые вы не можете отказаться. Он также очень активно поддерживается и MIT лицензирован на 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>

Ответ 2

Просто подумал, что отправлю дополнительный ответ на вопрос от @KyorCode. Я последовал его совету и пошел с 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>

НТН