Trascina e lascia cadere con l'interfaccia utente jQuery e i risultati filtrati a eliminazione diretta

Question

Prima di tutto, ecco un jsfiddle che ha il problema che sto riscontrando.

http://jsfiddle.net/ug66k/9/

Premessa:

Ho, come puoi vedere, una casella di input in cui è possibile digitare i parametri di filtraggio sui nomi utente.

Il codice rende anche tutti gli utenti che supportano Drag & Drop con l'interfaccia utente di JQuery.

Dopo un round di ricerca di qualcosa e poi provando a trascinare gli elementi: tutto viene trascinato rispetto a un solo elemento trascinabile.

Quello che sto cercando di ottenere:

Voglio filtrare un elenco di utenti e avere tutti gli utenti risultanti trascinabili uno per uno.

Domanda:

Come mi affronterei in modo diverso per evitare questo problema, e in effetti - cosa sta causando questo problema al momento?

La mia ipotesi:

Dopo una ricerca, Knockout probabilmente genera un nuovo set di oggetti DOM per me (mentre il set precedente è ancora in memoria), e ho ancora alcuni gestori appesi da qualche parte, e dopo un giro di ricerche ai vecchi gestori iniziano a scherzare con quelli nuovi ? Mi aspetterei ancora che il trascinamento piuttosto non funzioni affatto dopo che il nuovo rendering è stato completato.

Saluti, Lari

Answer 1

Sembra che il selettore stia colpendo il Div del contenitore per ciascun utente filtrato, nonché per ogni utente. Il modello utente reale viene reso solo la prima volta, mentre il foreach L'area viene ripristinata in base al filtro.

Una scelta sarebbe quella di mettere il tuo afterRender sul foreach piace:

<div data-bind="foreach: { data: filteredItems, afterRender: $root.makeDraggable }">
    <div data-bind="text: Username" />
</div>

Campione: http://jsfiddle.net/rniemeyer/ug66k/13/

Altrimenti, puoi sicuramente usare un semplice legame personalizzato per far sì che ciò accada come:

ko.bindingHandlers.draggable = {
    init: function(element, valueAccessor) {
       var options = ko.utils.unwrapObservable(valueAccessor()) || {};
       $(element).draggable(options);
    }    
};

Quindi, usalo come:

<div data-bind="foreach: filteredItems">
    <div data-bind="text: Username, draggable: { appendTo: 'body', helper: 'clone' }" />
</div>

Ecco un campione: http://jsfiddle.net/rniemeyer/ug66k/12/