Rectangle 27 0

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


<!-- 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>
<!-- 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>
<style type="text/css">
    /* show the move cursor as the user moves the mouse over the panel header.*/
    #draggablePanelList .panel-heading {
        cursor: move;
    }
</style>

@Acentric why not use a handle and/or delay to distinguish between scroll and drag actions?

@light24bulbs - Just tested it on my iPad, and it doesn't work, maybe by design... If I'm honest, I don't like the idea of drag-and-drop on touch devices, because it's hard (impossible?) to tell the difference between scroll actions and drag actions. I use JIRA for bug tracking, and one of my gripes about their interface is that I keep accidentally changing issue priorities when I try to scroll on my iPad because it allows issues to be dragged into priority order. It's a great feature on desktop, but a better approach for touch would be fat-finger-sized up/down arrows on each row.

@speendo - I am using handle in my example. There's a brief discussion of the UX concerns of drag-and-drop on touch devices - but essentially it conflicts with scroll gestures, and many devices now use the long-touch as a right-click - so delay can conflict with that.

Here's a working example on www.bootply.com.

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.

Just thought I'd post a supplemental answer to the one from @KyorCode. I followed his advice and went with JQuery Sortable and it worked seamlessly for me. It took me maybe 10 minutes to get this working.

One minor caveat -- you may encounter some namespace collisions running both jQuery UI and Bootstrap together. You can mitigate this by either performing a custom jQuery UI export and including only the features you need (as is the case here), or by using jQuery's 'bridge' function to rename the jQuery UI functions that duplicate Bootstrap functions, such as 'tooltip' and 'button.' See stackoverflow.com/questions/13731400/ for more information.

Note
Rectangle 27 0

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


<!-- 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>
new Sortable(document.getElementsByClassName('sortable')[0]);

@FezVrasta: are you the Fez Vrasta who made the Material Bootstrap Design?

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.

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.

yup I'm the developer

Note
Rectangle 27 0

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


<!-- 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>
new Sortable(document.getElementsByClassName('sortable')[0]);

@FezVrasta: are you the Fez Vrasta who made the Material Bootstrap Design?

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.

Wow, been looking for something as simple as Sortable for a while. Didn't want to use jQuery UI.

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.

yup I'm the developer

Note
Rectangle 27 0

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


<!-- 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>
<!-- 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>
<style type="text/css">
    /* show the move cursor as the user moves the mouse over the panel header.*/
    #draggablePanelList .panel-heading {
        cursor: move;
    }
</style>

@light24bulbs - Just tested it on my iPad, and it doesn't work, maybe by design... If I'm honest, I don't like the idea of drag-and-drop on touch devices, because it's hard (impossible?) to tell the difference between scroll actions and drag actions. I use JIRA for bug tracking, and one of my gripes about their interface is that I keep accidentally changing issue priorities when I try to scroll on my iPad because it allows issues to be dragged into priority order. It's a great feature on desktop, but a better approach for touch would be fat-finger-sized up/down arrows on each row.

@speendo - I am using handle in my example. There's a brief discussion of the UX concerns of drag-and-drop on touch devices - but essentially it conflicts with scroll gestures, and many devices now use the long-touch as a right-click - so delay can conflict with that.

Fantastic. Thanks for this. Got it up and working on a very complex web page inside of 15 minutes!

Here's a working example on www.bootply.com.

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.

Just thought I'd post a supplemental answer to the one from @KyorCode. I followed his advice and went with JQuery Sortable and it worked seamlessly for me. It took me maybe 10 minutes to get this working.

One minor caveat -- you may encounter some namespace collisions running both jQuery UI and Bootstrap together. You can mitigate this by either performing a custom jQuery UI export and including only the features you need (as is the case here), or by using jQuery's 'bridge' function to rename the jQuery UI functions that duplicate Bootstrap functions, such as 'tooltip' and 'button.' See stackoverflow.com/questions/13731400/ for more information.

Note
Rectangle 27 0

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


<!-- 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>
<!-- 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>
<style type="text/css">
    /* show the move cursor as the user moves the mouse over the panel header.*/
    #draggablePanelList .panel-heading {
        cursor: move;
    }
</style>

@Acentric why not use a handle and/or delay to distinguish between scroll and drag actions?

@light24bulbs - Just tested it on my iPad, and it doesn't work, maybe by design... If I'm honest, I don't like the idea of drag-and-drop on touch devices, because it's hard (impossible?) to tell the difference between scroll actions and drag actions. I use JIRA for bug tracking, and one of my gripes about their interface is that I keep accidentally changing issue priorities when I try to scroll on my iPad because it allows issues to be dragged into priority order. It's a great feature on desktop, but a better approach for touch would be fat-finger-sized up/down arrows on each row.

@speendo - I am using handle in my example. There's a brief discussion of the UX concerns of drag-and-drop on touch devices - but essentially it conflicts with scroll gestures, and many devices now use the long-touch as a right-click - so delay can conflict with that.

Here's a working example on www.bootply.com.

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.

Just thought I'd post a supplemental answer to the one from @KyorCode. I followed his advice and went with JQuery Sortable and it worked seamlessly for me. It took me maybe 10 minutes to get this working.

One minor caveat -- you may encounter some namespace collisions running both jQuery UI and Bootstrap together. You can mitigate this by either performing a custom jQuery UI export and including only the features you need (as is the case here), or by using jQuery's 'bridge' function to rename the jQuery UI functions that duplicate Bootstrap functions, such as 'tooltip' and 'button.' See stackoverflow.com/questions/13731400/ for more information.

Note
Rectangle 27 0

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


<!-- 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>
new Sortable(document.getElementsByClassName('sortable')[0]);

@FezVrasta: are you the Fez Vrasta who made the Material Bootstrap Design?

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.

This one works as opposed to the other one.

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.

yup I'm the developer

Note