使用 JQuery UI 和 Knockout 过滤结果拖放答案

【问题标题】：Drag and drop with JQuery UI and Knockout filtered results使用 JQuery UI 和 Knockout 过滤结果拖放
【发布时间】：2012-03-10 09:35:03
【问题描述】：

首先，这是一个 JSFiddle，它有我遇到的问题。

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

前提：

如您所见，我有一个输入框，您可以在其中输入用户名的过滤参数。

该代码还使所有用户都支持使用 JQuery UI 进行拖放。

经过一轮搜索，然后尝试拖动项目 - 一切都被拖动，而不是只有一个项目可以拖动。

我想要达到的目标：

我想过滤一个用户列表，并让所有结果用户都可以一个一个地拖动。

问题：

我将如何以不同的方式解决这个问题以避免这个问题，事实上 - 目前是什么导致了这个问题？

我的假设：

搜索后，knockout 可能会为我生成一组新的 Dom 对象（而前一组仍在内存中），我仍然有一些处理程序挂在某个地方，经过一轮搜索后，旧处理程序开始搞乱新的？在新的渲染完成后，我仍然希望拖动而不是根本不起作用。

干杯，拉里

【问题讨论】：

标签： jquery jquery-ui knockout.js knockout-mapping-plugin

【解决方案1】：

看起来您的选择器正在点击每个过滤用户以及每个用户的容器 div。实际的用户模板只会在第一次渲染，而foreach 区域会根据过滤器重新渲染。

一种选择是将您的afterRender 放在foreach 上，例如：

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

示例：http://jsfiddle.net/rniemeyer/UG66K/13/

否则，您当然可以使用简单的自定义绑定来实现这一点，例如：

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

然后，像这样使用它：

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

这是一个示例：http://jsfiddle.net/rniemeyer/UG66K/12/

【讨论】：