J'ai une liste de tri avec qui je travaille avec qui peut avoir des éléments ajoutés et supprimés par un autre script via JQuery et avoir un problème étrange. Ces articles nouvellement générés semblent être glagibles, mais ils ne tricent pas réellement que si je les ayez déjà là au chargement de la page. J'ai essayé d'utiliser avec triable ('rafraîchir »), mais il semble avoir aucun effet.
4 Réponses :
Pour vous donner l'occasion de fermer cette question, et juste à propos de la référence au cas où quelqu'un d'autre trébuche à travers cela, cela semble fonctionner correctement dans la dernière UI de JQuery-UI. Voici un jsfiddle: http://jsfiddle.net/fordlover49/mvrga/
Pas exactement une "solution", mais le problème n'existe plus. Cette information est équivalente cependant.
Ce n'est pas une période de solution. Votre exemple propose deux listes où tous les éléments étaient déjà initialisés comme triables. Cette question pose des questions sur les éléments ajoutés à une liste déjà initialisée.
Ils n'étaient pas tous initialisés comme triables. Notez qu'après avoir été initialisée, elle ajoute des éléments supplémentaires à la liste non ordonnée. Pour le prouver, effectuez simplement une installation autour du code qui ajoute les éléments de liste "Ajoutés" et vous verrez que la liste est triable sans les nouveaux éléments, et après les incendies de délai d'attente, les nouveaux éléments sont automatiquement triables. Comme cela a été mentionné dans ma réponse initiale, je ne l'ai pas réparais, je venais d'observer que l'équipe JQuery-UI a fixé la question dans la dernière version.
J'ai eu un problème similaire. Une fois que j'ai ajouté un nouvel élément à la liste de tri unique, rien n'a plus été draguable. Ma solution consistait à appeler la méthode d'abord, puis le rendre à nouveau tritable. détruire :
Je devais appeler Détruire avant d'ajouter les éléments, puis à réinitialiser (en entrant dans une fonction la configuration). Il semble que ce soit une question de jQuery et pourrait probablement être travaillé avec un essai attrayant dans l'interface utilisateur JQuery.
C'était avec p>
quels sont les dernières interface utilisateur JQuery et JQuery sur Codepen. Ceci est le code de niveau High-ISH. P>
$('.list-items').sortable("destroy"); // note the destroy before adding
$('.list-all:last-of-type').after( newItemDOM() );
$('.board').width( (300*(numLists()+1))+20 );
$('.board').sortable("refresh");
setupItemSort(jQuery); // where I initialize my item sorting with options.
Lorsque vous décochez la case Cochez la case, vous ne pouvez pas faire glisser l'élément, sinon vous devrez cocher Cochez la case après que vous puissiez glisser la case. Lorsque vous décochez la case à cette époque à ce moment-là, nous devons rafraîchir la position de l'élément triable.
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <ul id="sortable" class="list-group"> <li class="ui-state-default" id="item-1"><input type="checkbox" name="item-1" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default" id="item-2"><input type="checkbox" name="item-2" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default" id="item-3"><input type="checkbox" name="item-3" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class="ui-state-default" id="item-4"><input type="checkbox" name="item-4" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class="ui-state-default" id="item-5"><input type="checkbox" name="item-5" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class="ui-state-default" id="item-6"><input type="checkbox" name="item-6" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class="ui-state-default" id="item-7"><input type="checkbox" name="item-7" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul>
J'ai aussi eu cette question aussi. Exécution d'actualisation sur un sélecteur de classe ne ajoute pas la classe 'UI-triable' dans le DOM. Avez-vous déjà résolu cela?
Je ne me souviens pas. Je pense que j'ai fini par le frapper et faire autre chose.