Dev Faq
11
votes

Plugin de tri jQuery avec "effet coulissant"?

jQueryui a un joli plugin, triable: http://jqueryui.com/demos/sortable/ Je suis très content de ce plugin mais je ne manque qu'une chose. Et c'est au lieu de laisser les éléments qui changent de position POP / Aller à sa nouvelle position, j'aimerais qu'ils "glissent" à cette nouvelle position à la place. En d'autres termes, rendez-le un peu plus lisse.

J'ai cherché le filet pendant trois jours maintenant et n'a pas trouvé un plugin qui fait ça (!?! ??). Je veux dire, il doit y en avoir un, non?

J'ai également essayé de modifier un peu le code un peu seul et je l'ai eu pour fonctionner de sorte que (en clonant l'élément, faites glisser le clone vers la nouvelle position, puis supprimez le clone. Pendant ce temps je me cache l'élément d'origine et l'ignorer après avoir supprimé le clone). Mais cela ne fonctionne pas très bien et je pensais qu'il doit y avoir un meilleur là quelque part!

Donc, je supplie vraiment de l'aide. Soit modifier l'aide, ou si vous avez vu un plugin qui le fait, s'il vous plaît (:

1 commentaires

J'ai remarqué maintenant pourquoi ma méthode "ne fonctionne pas". On dirait que si je traîne mon élément trop vite, le script jquery-ui ne remarque pas que je l'ai même traîné, lol. J'ai même téléchargé une nouvelle copie nouvelle (juste pour être sûr) et j'ai essayé de le faire glisser très vite sur les autres, et parfois il échoue. Donc, il y a un problème avec le code d'origine alors .. BLEH

3 Réponses :

0
votes
  1. Vous pouvez le contrôler avec les options d'événements. Vérifiez-les ...
  2. Seeful avec la file d'attente parce que si vous faites glisser un élément, puis faites glisser l'autre avec la South, la première finition qui peut sembler drôle.
  3. Je vous recommanderais de lire à propos de .stop (), la file d'attente JQ et éventuellement "Annuler Bubble"
2 commentaires

Ah Ok, peut-être que c'est «mieux» d'utiliser les événements. Mais qu'entendez-vous par «la commande»? Les objets sont statiques, par d'autres termes, ils ne peuvent pas être déplacés de manière dynamique à la page, à moins que vous ne changiez la propriété sur Fixe / Absolute, et cela crée beaucoup de problèmes ..

Je veux dire que vous pouvez utiliser Démarrer: fonction () {...} Pour créer un élément de fantôme, puis utiliser glisser: fonction () {...} pour déplacer le Ghost utilise enfin stop: fonction () {...} pour détruire le fantôme, puis faites glisser l'original à la position finale. ou quelque chose comme ça.

8
votes

Si vous regardez le démo triable avec PlaceHoder et utilisez le code suivant pour initialiser le Soyable, vous verrez une action coulissante dans l'espace réservé 

$(function() {
  $("#sortable").sortable({
    placeholder: 'ui-state-highlight',
    start: function (e,ui){        // new lines to
      $(ui.placeholder).slideUp(); // remove popping
    },                             // effect on start
    change: function (e,ui){
      $(ui.placeholder).hide().slideDown();
    }
  });
  $("#sortable").disableSelection();
});

3 commentaires

C'est un bon moyen d'y aller! Seulement une chose. Lorsque vous le cachez, tous les éléments «ci-dessous» L'espace réservé sauteront à l'endroit où l'espace réservé était, ils commenceraient à glisser. Y a-t-il un moyen de "les verrouiller"? Parce qu'il semble très drôle si vous faites glisser le 5ème sur le 4ème élément de votre exemple ...

Fonctionne très bien lorsque vous glissez, mais lorsque vous avez traîné, l'espace réservé disparaît simplement en donnant une apparence de saut / claqué. Y a-t-il un moyen de détecter également le traînant?

L'espace réservé est supprimé par JQuery afin qu'il obtiendra un peu plus compliqué. Je dirais que vous devez insérer votre propre élément de placement sur l'événement de changement et l'animer vous-même

1
votes

Vous pouvez le faire glisser avec: 

(...).sortable({
revert : 300, ...

0 commentaires

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier