Le glisser-déposer pour réorganiser les listes HTML

J'ai une appli pour laquelle je voudrais être en mesure de glisser-déposer pour réorganiser et d'organiser des couleurs dans des groupes. jQuery sortable pour les grilles semble plutôt insensible et un peu buggé. microjs recommande kbjr de DragDrop, mais que la bibliothèque n'a pas de notion de listes, uniquement des objets mobiliers. Sproutcore a une belle mise en œuvre, mais je ne peux pas trouver une démo de travail pour une grille.

Mon INTERFACE utilisateur ressemble à ceci:

Le glisser-déposer pour réorganiser les listes HTML

et j'aimerais que les utilisateurs soient en mesure de faire glisser des couleurs au sein des groupes ainsi que faites-les glisser entre les groupes.

  • Une question à se poser est : Est-il d'usage temporaire de regroupement? J'imagine que oui. En supposant que vous devriez vraiment commencer à @ "quels sont ces collections", dans le sens de la façon dont vous les associer et comment cette association est significative pour l'utilisateur final. edit (désolé, appuyez sur entrée, vous aurez besoin d'écouter pour glisser / déposer les stages et probablement la meilleure(la plus facile?) l'approche est la masse de cession / unassignment de classes. Ces classes devraient être représentatifs des collections @ certain niveau et vous aurez probablement besoin de plusieurs années ou plus pour décrire ce comportement correctement-edit2-je suis partie à Jquery.si l'id de commencer par là
InformationsquelleAutor nornagon | 2012-04-28
  1. 45

    Essayer cette: HTML5 Sortable. Il est un plugin jQuery pour créer des listes triables et les grilles à l'aide de HTML5 native API de glisser-déposer.

    • +1 mais j'ai un problème. Je ne peux pas remplacer le premier élément. Je veux dire, si je fais glisser la deuxième ou de la troisième à la première place, le premier n'est pas remplacé. Quel peut être le problème? Merci!
    • L'original Html5Sortable par Ali Farhadi n'est pas activement maintenu. La fourche par Alexandru Badiu est le meilleur choix. Voir github.com/voidberg/html5sortable.
    • Après le tri comment puis-je obtenir la commande en cours.
    • en jQuery ... $('#domId subEl').each(function(){ $(this).text(); }); où #domId est le dom wrapper autour de ce que vous souhaitez commander et subEl est la classe/tagName des articles commandés.
    InformationsquelleAutor Farhadi
  2. 30

    Juste un match amical de mise à jour, puisque cette question est apparue dans la recherche. HTML5Sortable n'est plus maintenu. La bibliothèque recommandé est Sortable.
    Taille: 12kb minimisé.

    Code:

    var sortable = Sortable.create($('#items'));

    Espère que cela contribuera à la prochaine wanderer.

    InformationsquelleAutor ahmohamed
  3. 10

    J'ai trouvé que ce (Nastable) est un peu plus utile pour la il a de nidification des capacités.

    Mise à jour
    Effectivement fini par utiliser ce plugin avec plus d'options.

    Espère que cela aide.
    Cheers!

    InformationsquelleAutor adrianthedev