버튼 클릭으로 드래그 가능한 div 만들기

Question

현재 div draggables를 만들기 위해 jquery UI와 함께 knockout.js 프레임 워크를 사용하고 있습니다. 나는 draggable divs의 숫자를 하드 코딩 할 수 있었고 추가 된 텍스트는 = 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

는 버튼을 누름으로 결박, 텍스트 영역

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>