从可分离容器中分离拖放目标

Question

我试图设置使用Knockout和jQuery进行拖放克隆，但是我无法弄清楚这一点。
我有the knockout-sortable binding that Niemeyer wrote，但我无法找到一种方法将其挂上我想要的。

我希望connectClass能够“抓住”下降，并将它们传递给子元素Sortable，但显然不是。这里是我从尼迈耶分手的小提琴，很简单地展示了我想要做的事情。

http://jsfiddle.net/Kal_Torak/g74xN/3/

我可排序的绑定元素并不总是会在他们的项目，所以列表本身是不可见的，所以我需要能够在父容器上任意地方扔，并让他们按照您的预期添加。

Answer 1

一个选项是添加一些droppable绑定，与sortable和draggable绑定配合良好。有几种方法可以做到这一点，但这里有一种方法可以将处理程序传递给droppable，并调用传递新项目的处理程序作为第一个参数。

ko.bindingHandlers.droppable = { 
    init: function(element, valueAccessor) { 
     var dropHandler = valueAccessor() || {}; 

     $(element).droppable({ 
      drop: function(event, ui) { 
       var item = ko.utils.domData.get(ui.draggable[0], "ko_dragItem"); 

       if (item) { 
        item = item.clone ? item.clone() : item; 
        dropHandler.call(this, item, event, ui); 
       } 
      } 
     }); 
    } 
}; 

然后，你会绑定它想：

<div id="main" data-bind="droppable: addTask"> 

随着addTask推到你的observbaleArray。

样品在这里：http://jsfiddle.net/rniemeyer/3JBnh/