在按钮单击时创建可拖动的 div答案

【问题标题】：Creating draggable div on button click在按钮单击时创建可拖动的 div
【发布时间】：2014-09-01 11:11:09
【问题描述】：

我目前正在使用框架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>

【问题讨论】：

标签： jquery jquery-ui knockout.js

【解决方案1】：

添加一个绑定到 textarea 的 observable

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>

【讨论】：