Liste triable responsive supportant le glisser-déposer pour bootstrap

Question

Je suis à la recherche d'une liste triable pour bootstrap 3. Les exigences sont de supporter le glisser-déposer et de fonctionner dans tous les navigateurs modernes et sur les appareils à écran tactile. Sur la base d'autres questions, j'ai trouvé les solutions possibles suivantes :

1. jqueryui-sortable combiné avec http://touchpunch.furf.com/ : semble fonctionner, mais jquery ui ne joue pas bien avec bootstrap

2. http://gridster.net/ : pas vraiment conçu pour les listes, mais pourrait aussi fonctionner

Quelqu'un a-t-il utilisé l'une de ces options dans un environnement de production ? Quelles sont les expériences concernant le support des navigateurs/appareils ? Existe-t-il une meilleure alternative ?

Answer 1

J'ai pensé poster une réponse complémentaire à celle de @KyorCode. J'ai suivi son conseil et j'ai opté pour JQuery Sortable et ça a marché sans problème pour moi. Il m'a fallu environ 10 minutes pour le faire fonctionner.

Je n'ai pas eu à inclure de CSS JQuery UI - seulement le JavaScript - et je n'ai donc pas eu de problème de conflit entre le 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 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

Answer 2

Quel est le problème avec JQuery Sortable ?

Ça a marché pour moi à chaque fois.

Answer 3

Avez-vous essayé http://johnny.github.io/jquery-sortable/#home

Je pense qu'il peut être la réponse à vos besoins.

Answer 4

Gridster est parfait pour le glisser-déposer ainsi que pour le redimensionnement, sur les ordinateurs de bureau et les tablettes. La seule chose qui pourrait être un inconvénient, c'est qu'il n'est pas vraiment réactif. Vous pouvez le voir clairement sur leur exemple principal sur leur site : http://gridster.net/ . essayez de redimensionner votre navigateur et voyez.

comme alternatives, vérifiez http://packery.metafizzy.co/

et http://mcpants.github.io/jquery.shapeshift/

Dans le pire des cas, vous pourriez mettre en place votre propre implémentation avec JQuery UI + touchpunch ou avec http://draggabilly.desandro.com/ qui fonctionne parfaitement sur les ordinateurs de bureau et les tablettes.

Answer 5

J'avais un besoin similaire lorsque je cherchais un plugin de tri :

• tout sauf JqueryUI draggable/sortable/droppable (trop lourd !)
• support pour le drag&drop
• la prise en charge non seulement des navigateurs les plus modernes
• support pour les dispositifs tactiles

J'ai testé de nombreuses bibliothèques et solutions, mais ces deux-là sont mes meilleurs candidats (par ordre de préférence) :

1. Le Sortabilly de Jeff Chen : https://github.com/chienhungchen/sortabilly
2. solution de CSS-tricks.com : http://css-tricks.com/draggable-elements-push-others-way/

Je ne les ai pas encore essayés, mais j'ai pensé que les mentionner pourrait être utile à quelqu'un.