Comment puis-je implémenter une liste tactile, responsive, sortable supportant le drag & drop pour Bootstrap?

les réponses postées avant celle-ci sont étonnamment périmées.

rubaxa-sortable est un widget de listes rapides, sans dépendances, avec support tactile, qui fonctionne avec l'API de drag&drop natif HTML5. Vous pouvez l'utiliser avec Bootstrap, Foundation, ou n'importe quelle bibliothèque CSS que vous voulez, et l'instancier ne prend qu'une ligne.

il prend en charge la réorganisation dans une liste ou à travers des listes. Vous pouvez définir des listes qui peuvent ne recevez que des éléments, ou des listes à partir desquels vous pouvez glisser, mais sur lesquels vous ne pouvez pas tomber. Il est également très activement maintenu et MIT autorisé sur 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>

je pensais juste poster une réponse supplémentaire à celle de @KyorCode. J'ai suivi son conseil et je suis allé avec jQuery Sortable et cela a fonctionné parfaitement pour moi. Il m'a fallu peut-être 10 minutes pour que ça marche.

Je n'ai pas eu à inclure de jQuery UI CSS - juste le JavaScript - donc il n'y avait aucun problème avec le CSS en conflit de toute façon avec Bootstrap.

Exemple Pratique:

voici un exemple de travail 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:

Vous pouvez télécharger JQuery Sortable sans inclure la totalité de JQuery UI dans votre page.

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