jQuery mit Sortierbaren mit dynamisch hinzugefügten Elementen (live-Aktualisierung)

Ich habe eine <form id="#form"> einer <span class="con"> und innerhalb der Spanne habe ich viele divs werden muss sortierbar. 

<form id="form">
    <span class="con">
        <div class="ui-state-highlight">Item 1</div>
        <div class="ui-state-highlight">Item 2</div>
        ... 
    </span>
</form>

Ich bin mit der Sortier-Funktion um div Sortierbar. 

$("span").sortable({
    connectWith: ".con"
}).disableSelection();

Ich bin dynamisch hinzufügen mit divs. Aber sortierbar ist nicht zu erkennen, neu Hinzugefügt überspannt. Ich weiß, es gibt eine refresh option für sortable, die funktionieren soll wie live() und reognize neu hinzugefügte Inhalte, aber ich sehe nicht, wie kann ich es mit diesem Beispiel.

Überprüfen http://jsfiddle.net/mRyVp/8/. Klicken Sie auf die Schaltfläche hinzufügen, um mehr überspannt mit divs. Sie werden sehen, dass Sie können Sie Sortieren, div, dass waren, die ursprünglich im DOM, aber nicht neu Hinzugefügt.

  • Aktualisiert jsfiddle link
  • es scheint, dass Sie mehrere sortierbare <span>, das wird sicherlich nicht als eine einzige Gruppe.
  • ja, Sie können verbinden Sie mehrere Bereiche auf. Schauen Sie z.B. hier jqueryui.com/demos/sortable/#event-update. Da spannt sich dynamisch Hinzugefügt werden, es funktioniert nicht, ansonsten, wenn alle waren, die ursprünglich im DOM wird es funktionieren.
  • es scheint, dass Sie sind Recht, ich werde einen Blick haben Sie den code erneut ein.
  • Ich dachte refresh sollte aktualisieren Sie dynamisch neue Inhalte Hinzugefügt aber es funktioniert nicht $('span').sortable('refresh')
  • sollte nicht Ihre <span> eine <div>? oder Ihr <div>s <span>s ?

InformationsquelleAutor Pinkie | 2011-03-29
  1. 10

    Scheint es, dass Sie class="connectedSortable" im

    <span class="connectedSortable">
    <div class="ui-state-highlight">Item 1</div>
    <div class="ui-state-highlight">Item 2</div>
    ... 
</span>

    Sowie connectWith: ".con" im 

    $("span").sortable({
    connectWith: ".con"
}).disableSelection();

    Hinzufügen con - Klasse original-div wird nur in Ordnung sein. Update hier.

    • Dank experiment +1. aber das ist ein wenig umständlich. Sie sind mit sortierbaren zweimal, eine innerhalb der click-Funktion und eine außerhalb. Wir sollten es nur nutzen, wenn und dann nutzen Sie die option aktualisieren.
    • gut, ich überprüfe das nochmal.
    • gut, die neu erstellt <span> nicht sortable Funktion zugeordnet, so müssen wir registrieren es wieder(nach Ihrer Entstehung) sonst wird es nicht funktionieren.
    InformationsquelleAutor Santosh Linkha
  2. 1

    Versuchen Sie dies:

    $('button').click(function() {
    var x = $('<div class="ui-state-highlight">Item '+($('.con div').length+1)+'</div>');
    x.appendTo('#form .con')
});

$("span").sortable({
    connectWith: ".con"
}).disableSelection();

    Wenn Sie klicken Sie auf "add another option", das Skript wird eine neue Sortier - 'Punkt' in der Liste

    InformationsquelleAutor Nick
  3. 0

    Schaltfläche ändern Klicken Sie auf Ereignis, wie nachfolgend beschrieben, und es funktioniert. Es sind keine weiteren änderungen erforderlich.
    Ich habe versucht, in jfiddler und es funktionierte. Neu hinzugefügte Elemente wird ein Teil der Liste und sind sortierbar gut.

    $('button').click(function() {
    var x = $('<div>aaaaaaaaa</div>');
    x.appendTo('#form .con')
});

    Ich definiert x als element und weitere x ist appenedTo ".con" - Klasse in #form.

    Den screen-shot dieser aktualisiertes Beispiel ist unten dargestellt:

    jQuery mit Sortierbaren mit dynamisch hinzugefügten Elementen (live-Aktualisierung)

    InformationsquelleAutor Rahul Varadkar
Schreibe einen Kommentar