在按钮单击上创建可拖动的div

Question

我目前使用框架knockout.js与jQuery UI（使div可拖动）相结合。我已经能够硬编码可拖动div的数量，并附加了文本= self.items(['One','Two','Three','Four','Five','Six']);。我想使它更具活力。我怎么能够创建新的div按钮单击事件，也将文本区域附加到新的div？ JSFIDDLE

Knockout.js

ko.bindingHandlers.draggable={ 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     $(element).draggable(); 
    } 
}; 

ko.bindingHandlers.droppable={ 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     $(element).droppable(); 
    } 
}; 

var vm=function(){ 
    var self=this; 
    self.items=ko.observableArray(); 
    self.init=function(){ 
     self.items(['One','Two','Three','Four','Five','Six']); 
    } 
    self.remove=function(item){ 
     console.log(item); 
     self.items.remove(item); 
    } 
    self.init(); 
} 

ko.applyBindings(new vm()); 

HTML

<textarea></textarea> 
<button>Generate New Div</button> 
<div data-bind="foreach:items"> 
    <div href="#" class="item" data-bind="draggable:true,droppable:true"> 
     <span data-bind="click:$parent.remove">[X]</span><br><br> 
     <center><span data-bind="text:$data"></span></center> 
    </div> 
</div> 

Answer 1

添加可观察到的绑定到textarea的

self.textContent = ko.observable(''); 

<textarea data-bind="value: textContent"></textarea> 

将创建一个附加功能，其绑定到按钮和推可观察阵列的新值

self.addNew = function() { 
    self.items.push(self.textContent()); 
    self.textContent(''); 
} 

<button data-bind="click: addNew">Generate New Div</button>