web-dev-qa-db-fra.com

Comment puis-je mettre en place une liste tactile, sensible et triable prenant en charge le glisser-déposer pour Bootstrap?

J'ai un <ul> liste que je veux rendre triable (glisser-déposer). Comment puis-je le faire fonctionner avec Bootstrap 3 dans les navigateurs modernes et les appareils tactiles?

J'essaie d'utiliser jqueryui-sortable combiné avec http://touchpunch.furf.com/ ; cela semble fonctionner, mais c'est hacky et jQueryUI ne joue pas bien avec Bootstrap.

Comment éviter les conflits Bootstrap/jQueryUI lors de l'ajout de la prise en charge d'écran tactile?

twitter-bootstrapjquery-uitouchjquery-ui-sortable
47
brk

Les réponses postées avant celle-ci sont étonnamment obsolètes.

rubaxa-sortable est un widget rapide, de petites listes réorganisables, avec prise en charge tactile, qui fonctionne avec l'API de drag & drop native HTML5. Vous pouvez l'utiliser avec Bootstrap, Foundation ou n'importe quelle bibliothèque CSS de votre choix. L'instancier ne prend qu'une ligne.

Il prend en charge la réorganisation dans une liste ou dans plusieurs listes. Vous pouvez définir des listes ne pouvant recevoir que des éléments, ou des listes à partir desquelles vous pouvez faire glisser, mais sur lesquelles vous ne pouvez pas déposer. Il est également très activement entretenu et licence MIT 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>
73
Dan Dascalescu

Je pensais juste que je posterais une réponse supplémentaire à celle de @KyorCode. J'ai suivi ses conseils et je suis allé avec JQuery Sortable et cela a fonctionné de manière transparente pour moi. Cela m'a pris peut-être 10 minutes pour que cela fonctionne.

Je n'avais pas à inclure de CSS de JQuery UI - uniquement du JavaScript - il n'y avait donc aucun problème de conflit entre CSS et Bootstrap.

Exemple de travail:

Voici un exemple de travail sur 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 l’ensemble de l’interface utilisateur JQuery 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

44
sheikhjabootie