如何实现支持拖放功能的触敏，响应式，可排序列表?掉进Bootstrap了吗? [英] How can I implement a touch-sensitive, responsive, sortable list supporting drag & drop for Bootstrap?

问题描述

我有一个要排序的<ul>列表(拖放).如何在现代浏览器和触摸设备中将其与Bootstrap 3配合使用?

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?

我正在尝试将jqueryui-sortable与 http://touchpunch.furf.com/结合使用；它似乎可以正常工作，但是它很笨拙，jQueryUI在Bootstrap中的表现不佳.

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.

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

How can I avoid Bootstrap/jQueryUI conflicts while adding touch-screen support?

推荐答案

在此之前发布的答案已经过时了.

The answers posted before this one are surprisingly outdated.

rubaxa-sortable 是一个快速，无依赖性，小型可重新排序的列表小部件，该部件具有触摸支持，可与HTML5原生拖放API配合使用.您可以将其与Bootstrap，Foundation或所需的任何CSS库一起使用，实例化它仅需一行.

rubaxa-sortable is 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.

它支持在列表内或列表间重新排序.您可以定义只能接收元素的列表，或者可以拖放但不能拖放到其中的列表.它也非常积极地维护并且麻省理工学院在GitHub上获得许可.

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.

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>

这篇关于如何实现支持拖放功能的触敏，响应式，可排序列表?掉进Bootstrap了吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！