从外面敲出可拆卸的拖放

也许有人可以帮助我。
我在webapp中获得了大量的视图。 左侧有产品列表，右侧有类别列表。 产品应该在类别中拖动。
产品清单是一个可观察的arrays。 现在，当列表有超过1000个条目时，我们遇到了性能问题（特别是在IE上）。 因此，因为产品本身不会改变，我们将它们从敲除绑定中取出，将它们连接在一个字符串中并仅附加一个节点。 当然，淘汰赛可排序的绑定不再起作用了……

这是类别的模板：

 
 
 
 
 
ID:  
  

这是左侧产品列表的js代码：

 function fillAllProductsTab() { var parts = ''; allProducts.forEach(function (item) { parts += '
' + // draggable="{data: $data, options:{containment: \'\#menuEditTab3Ce\', revert: \'invalid\'}}" '
' + '
' + item.Name + '
' + '
ID: ' + item.Id + '
' + '' + item.Price + ' €
'; }); $("#allp").append(parts); }; 

现在我的想法是，我可以在附加它们之后手动初始化产品列表上的可拖动插件：

  $('#allp > div').draggable({ //connectToSortable: '#sortable', helper: 'clone', revert: 'invalid', cursor: 'move' }); 

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

Answer 1

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

ko.utils.domData.set(element, key, value);

因此，在将项目放入可排序项之前，您可能希望附加此元数据。 就像是：

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

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

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

使用handleDraggedItem如：

 this.handleDraggedItem = function(item, event, ui) { return new Task(ui.item.text()); }; 

以下是jsFiddle中的示例： http ： //jsfiddle.net/rniemeyer/aewLbnrm/

因此，您需要决定构建项目的方式/位置。 您可以在draggable start方法中执行此操作，只需从dragged函数中返回项目，或者像dragged函数中的样本一样。 希望一切都有道理！