Jquery 单击按钮创建可拖动div

我目前正在将框架

knockout.js

与jqueryui结合使用（以制作div draggables）。我已经能够硬编码可拖动div的数量，并添加文本=

self.items（['1'，'2'，'3'，'4'，'5'，'6'）。我想让它更有活力。如何在按钮单击事件上创建新div，该事件还将向新div添加文本区域

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


生成新Div
[十] 


将可观察的绑定添加到文本区域

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

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

self.textContent=ko.可观察（“”）；

创建一个add函数，将其绑定到按钮，并将一个新值推送到可观察数组

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

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

self.addNew=函数（）{
self.items.push（self.textContent（））；
self.textContent（“”）；
}
生成新Div

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

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