在按鈕單擊上創建可拖動的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>