Ajouter à Jquery-ui liste triable

Simple question à propos de Jquery-UI sortable listes

J'ai fait:

<div id="adder">
<input type="text" name="add1" /><br />
<input class='btn' type='submit' value='Submit' />
</div>

Comment puis-je l'utiliser pour ajouter ce que l'utilisateur saisit à la fin de l'jquery-ui sortable liste?

InformationsquelleAutor David19801 | 2012-01-10
  1. 36

    Sans doute, vous prenez juste le texte, de l'envelopper dans un LI avec la classe ui-state-default et l'insérer dans le triable élément UL. Vous devrez ensuite actualiser la sortable à cause de la nouvellement élément inséré être reconnue:

    $(".btn").click(function (e) {
    e.preventDefault();
    var text = $("input[name='add1']").val();
    var $li = $("<li class='ui-state-default'/>").text(text);
    $("#sortable").append($li);
    $("#sortable").sortable('refresh');
});

    Vous pouvez l'essayer ici.

    • Merci!!!!, Mais comment est-ce l'ajout de l' </li> à l'élément de la liste? Aussi, avez-vous plus d'info sur $ avant un nom de variable comme ici avec $li?
    • jQuery prend soin d'ajouter la balise de fermeture. Le $ est juste une convention commune à dire cette variable contient un objet jQuery. L'espoir qui efface les choses.
    • jQuery (ou INTERFACE) prend en charge l'ajout de la <span class="ui-icon ui-icon arrowthick-2-n-s"> avec la nouvelle <li>? Je ne vois pas explicitement dans votre violon. Merci.
    • Cela m'a beaucoup aidé pour ajouter une image à la liste triable, merci
    InformationsquelleAutor karim79
  2. 0

    Pour moi, le $("#sortable").sortable('refresh'); n'a pas travaillé.

    Mais cela a fonctionné: $("#sortable").trigger("sortupdate");

    InformationsquelleAutor mFlorin
  3. 0

    Je sais que c'est pas exactement la réponse, mais @karim79 m'a aidé à trouver un moyen d'ajouter une image à la liste triable, si quelqu'un en a besoin ici, c'est:

    <input type='file' onchange="readURL(this);" style="width: 100%;" />

    function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var $li = $("<li class='ui-state-default'/>");
            $li.append('<img src="'+ e.target.result +'" width="150" height="200" />');
            $("#sortable").append($li);
            $("#sortable").sortable('refresh');
        };
        reader.readAsDataURL(input.files[0]);
    }
}
    InformationsquelleAutor magorich
  4. 0
    $("selector").sortable('refresh')

    fonctionne très bien.

    Il y a une chose d'être conscient de:

    handle: '.iORAS_ORD'

    Si vous utilisez la poignée avec sortable, ne pas utiliser jquery pour la sélection, comme:

    handle: $('.iORAS_ORD')

    Si vous utilisez jQuery, le tri après l'insertion n'est pas possible sur les nouveaux éléments insérés.
    Plus sur le sujet ici.

    InformationsquelleAutor FrenkyB