Jquery 击出可排序的从外部拖放

也许有人能帮我
我在一个网络应用程序中获得了一个大视图。左侧是产品列表，右侧是类别列表。应将产品拖动到类别内
产品清单是一个明显的例子。现在，当列表中有1000多个条目时，我们会遇到性能问题（特别是在IE上）。因此，由于产品本身没有改变，我们将它们从敲除绑定中取出，将它们压缩成字符串，并只附加一个节点。当然，现在敲除可排序绑定不再工作了

这是类别的模板：

<div data-bind="sortable: {data: Products, beforeMove: $root.verifyProducts}, attr: { 'data-max': MaxProducts }">
<div class="menuEditTab2CatDragItem clearfix" data-bind="attr: { 'data-prodid': Id }">
    <div class="menuEditTab3ProdsNameText" data-bind="text: Name"></div>
    <div class="pull-right" style="margin-left:8px;"><i style="margin-top:-4px;" class="icon-remove" data-bind="click: $parent.removeProduct"></i>

    </div>
    <div class="pull-left menuEditTab3ProdsIdText">ID: <span data-bind="text: Id"></span>
    </div>
</div>

---

所以，我的问题是，我不能让他们一起工作。左侧列表是可拖动的，右侧的可排序列表也在工作，但连接不工作。没有正在发生的掉落事件。。。一般来说，这是可能的吗？如果有人想得到这项工作？

当可排序的

插件接收到一个拖动的项时，它希望元素附加一些元数据，指向应该删除的实际数据项。元数据通过KO的
KO.utils.domData.set
函数附加。它被称为：

ko.utils.domData.set（元素、键、值）

因此，在将项目放入可排序表之前，您需要附加此元数据。比如：

$(".drag-item").draggable({
    connectToSortable: ".container",
    helper: "clone",
    start: function(event, ui) {
        ko.utils.domData.set(event.target, "ko_dragItem", true);
    }
});

当一个可拖动的项目被删除时，插件会尝试两种方法来创建一个副本，以实际放置到可排序的observableArray中。首先，它在项目上查找
clone
函数。其次，它运行一个在可排序绑定中配置的
拖动的
函数，并使用返回值作为项

因此，可排序绑定可能如下所示：

<div class="container" data-bind="sortable: { data: tasks, dragged: handleDraggedItem }">
    <div class="item" data-bind="text: name">
    </div>
</div>

以下是JSFIDLE中的一个示例：

因此，您需要决定如何/在何处构建项目。您可以在draggable
start
方法中执行此操作，只需从您的
拖动的
函数返回项目，或者在我的示例中的
拖动的
函数中执行此操作。希望一切都有意义
 当
sortable
插件接收到一个拖动的项时，它希望元素附加一些元数据，指向应该删除的实际数据项。元数据通过KO的
KO.utils.domData.set
函数附加。它被称为：

ko.utils.domData.set（元素、键、值）

因此，在将项目放入可排序表之前，您需要附加此元数据。比如：

$(".drag-item").draggable({
    connectToSortable: ".container",
    helper: "clone",
    start: function(event, ui) {
        ko.utils.domData.set(event.target, "ko_dragItem", true);
    }
});

当一个可拖动的项目被删除时，插件会尝试两种方法来创建一个副本，以实际放置到可排序的observableArray中。首先，它在项目上查找
clone
函数。其次，它运行一个在可排序绑定中配置的
拖动的
函数，并使用返回值作为项

因此，可排序绑定可能如下所示：

<div class="container" data-bind="sortable: { data: tasks, dragged: handleDraggedItem }">
    <div class="item" data-bind="text: name">
    </div>
</div>

以下是JSFIDLE中的一个示例：

因此，您需要决定如何/在何处构建项目。您可以在draggable
start
方法中执行此操作，只需从您的
拖动的
函数返回项目，或者在我的示例中的
拖动的
函数中执行此操作。希望一切都有意义
 谢谢你的支持！我明天去看看；-）如果任务有其他属性和名称，handleDraggedItem将如何更改，我这里有一个类似的问题：感谢您的支持！我明天去看看；-）如果任务有其他属性和名称，handleDraggedItem将如何更改，我在这里有一个类似的问题：
this.handleDraggedItem = function(item, event, ui) {
    return new Task(ui.item.text());
};