How can I implement a touch-sensitive, responsive, sortable list supporting drag & drop for Bootstrap?

twitter-bootstrap jquery-ui touch jquery-ui-sortable
brk picture brk · Dec 6, 2013 · Viewed 84.9k times · Source

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?

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.

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

Answer

Dan Dascalescu picture Dan Dascalescu · Dec 1, 2014

The answers posted before this one are surprisingly outdated.

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.

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>

Related questions

Calling a function on bootstrap modal open

I used to use JQuery UI's dialog, and it had the open option, where you can specify some Javascript code to execute once the dialog is opened. I would have used that option to select the text within the dialog …

Read More
Trees in Twitter Bootstrap

I have been trying to work on creating a tree (like a directory tree) that uses as much CSS and as little JS as possible (only for states, etc), and I want to know if there are some good existing …

Read More
How to get the selected date value while using Bootstrap Datepicker?

Using jquery and the Bootstrap Datepicker, how do I get the new date value I selected using the Bootstrap Datepicker? FYI, I'm using Rails 3 and Coffescript. I set up the datapicker using: <input id="startdate" class="span2 datepicker" type="…

Read More