Drag and drop with JQuery UI and Knockout filtered results

Question

First of all, here is a JSFiddle which has the problem I'm getting.

http://jsfiddle.net/UG66K/9/

Premise:

I have, as you can see, one input box in which you can type filtering parameters on Usernames.

The code also makes all the users support drag & drop with JQuery UI.

After one round of searching something, and then trying to drag the items - everything gets dragged as opposed to just one item being draggable.

What I'm trying to achieve:

I want to filter a list of users, and have all the resulting users be draggable one by one.

Question:

How would I approach this differently to avoid this problem, and in fact - what is causing this problem at the moment?

My hypothesis:

After a search, knockout probably generates a new set of Dom objects for me (while the previous set is still in memory), and I still have some handlers hanging somewhere, and after one round of searching the old handlers start messing with the new ones? I'd still expect the dragging rather to not work at all after the new render has been completed.

Cheers, Lari

Answer 1

It looks like your selector is hitting the container div for each filtered user, as well as each user. The actual user template only gets rendered the first time, while the foreach area gets re-rendered based on the filter.

One choice would be to put your afterRender on the foreach like:

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

Sample: http://jsfiddle.net/rniemeyer/UG66K/13/

Otherwise, you can certainly use a simple custom binding to make this happen like:

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

Then, use it like:

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

Here is a sample: http://jsfiddle.net/rniemeyer/UG66K/12/