web-dev-qa-db-fra.com

Alternative légère à l'interface utilisateur jQuery triable ()?

jQuery UI (1.8+) s'annonce comme une excellente bibliothèque, mais je trouve que cela fait souvent trop pour moi. Existe-t-il une bibliothèque alternative pour créer une liste triable ayant une empreinte plus petite?
L'exclusion de fonctionnalités telles que les espaces réservés et le tri de liste croisée est acceptable.

Éditer:
(C'est devenu une discussion intéressante, merci pour toutes les réponses.)
Il semble que quelques utilisateurs ne savent pas ce que jQuery UI est triable. Ce n'est pas le tri de table, mais l'agencement de liste. Pensez à réorganiser votre file d'attente Netflix. Voir la démo ici: http://jqueryui.com/demos/sortable/

javascriptjqueryjquery-uijquery-ui-sortable
33
tbeseda

Le code le plus petit et le plus simple que j'ai trouvé était HTML5 Sortable . C'est un minuscule plugin JQuery qui fonctionne sur une large gamme de navigateurs et qui ne fait que 1,5 Ko.

Les démos de HTML5 triables sont ici .

25
mikemaccana

Les réponses affichées avant celle-ci sont étonnamment dépassées.

Triable est un widget rapide, sans dépendances, petites listes réorganisables avec prise en charge tactile qui fonctionne avec l'API native glisser-déposer HTML5. Vous pouvez l'utiliser avec Bootstrap, Foundation ou toute bibliothèque CSS de votre choix et l'instancier ne prend qu'une seule ligne.

Il prend en charge la réorganisation dans une liste ou entre des listes. Vous pouvez définir des listes qui ne peuvent 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 maintenu et MIT sous licence 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>
28
Artem Verbo

D'accord, j'attendais que quelqu'un d'autre obtienne une meilleure réponse, mais comme cela ne s'est pas encore produit, je partagerai mes propres recherches:

Si je prends la liberté de théoriser sur ce manque, je suppose que c'est le cas, car le glisser-déposer nécessite beaucoup de hacks et de corrections entre navigateurs dans les navigateurs plus anciens et donc toute personne qui prévoit de traverser ce problème dépendra des bibliothèques existantes qui limitent au moins la quantité de pain.

2
David Mulder

jQuery triable à 8.4 Kb minified est un autre candidat. C'est un plugin jQuery et semble être activement maintenu.

1
jogaco

Vous pouvez essayer le framework javascriptmvc.com. Il est construit sur jquery et dispose d'un puissant mécanisme de "vol", qui vous permet d'inclure uniquement les parties du framework que vous utilisez réellement.

Sa bibliothèque mxui fournit des fonctionnalités triables, vous pouvez l'essayer ici: http://javascriptmvc.com/docs.html#!Mxui.Layout.Sortable

0
Samuel Hapak

Comme vous l'avez dit, "jQuery UI (1.8+) s'annonce comme une excellente bibliothèque". Eh bien, si vous le pensez, pourquoi choisir une autre bibliothèque, je pense que vous voulez une alternative car la bibliothèque jQuery ui est très lourde à charger. Si oui, sélectionnez uniquement les fonctionnalités dont vous avez besoin en effectuant un téléchargement personnalisé. Une fois que vous avez téléchargé la bibliothèque personnalisée. Téléchargez-le sur votre serveur ou téléchargez-le sur un site d'hébergement JavaScript gratuit tel que-
http://yourjavascript.com/ .
Ou choisissez un site Web dans cette liste.

0
NewUser

Je fournis ma réponse après avoir consulté la SO réponse fournie par Samuel Hapak. Le steal.js le fichier est un poids lourd à 18.7kb. Puis pour " voler " sortables.js à 2.7kb l'amène à un lourd 21.4kb. Ajout d'une goutte facultative à 4kb et faites glisser sur 5.5kb porte le grand total à 30.9kb. Page de démonstration de référence ici et affichez l'onglet NET source dans les outils de développement.

A titre de comparaison, le plugin jQuery UI Sortable pèse à 33.3Kb (qui inclut le nu nécessaire UI Core que vous ne voulez pas).


Veuillez considérer le module de tri des éléments d'interface léger qui pèse à peine 18.9Kb et c'est avec trois dépendances de drag, drop, et util inclus.

Les éléments triables de l'interface ont également une page d'exemple simple ICI et ICI .

0
arttronics