1

我有一个可观察的数组，可以添加或删除元素。元素显示为 DIV。我想让每个 DIV 都可以拖动，但是因为 DIV 是动态创建的，所以我不知道该怎么做。我正在考虑使用 JQuery live() 函数，但我需要传递和操作，所以我认为这不是正确的方法。

这是我的代码：淘汰赛：

function AssetViewModel() {


var self = this;

self.assets = ko.observableArray([]);

self.addAsset = function(){
    self.assets.push(
        {
            id: "1",
            content: "Hello World",
            type: "Asset"
        }
    );
}
self.removeAsset = function(asset){
    self.assets.remove(asset);
    };
};

HTML：

<div id="layer1" data-bind="foreach: assets">
<div data-bind="text: content" class="asset"></div>

</div>

任何建议将不胜感激！

4

3 回答 3

2

这是自定义绑定的工作。要点是您创建自己的绑定，因此您的标记如下所示：

<div data-bind="foreach: assets">
    <div data-bind="draggable: $data">
        <p>More markup</p>
    </div>
</div>

自定义绑定将是：

ko.bindingHandlers.draggable = {
    init: function (element, valueAccessor, allBindingsAccessor, vieModel, bindingContext){
        $(element).draggable();
        return ko.bindingHandlers.with.init.apply(this, arguments);
    }
};

您不需要返回任何内容，但通过调用with绑定 init 函数，您创建了一个包装绑定，该绑定执行您的逻辑，并且就像您要返回的绑定一样。在学习自定义绑定时，它通常是一个很好的起点。

于 2013-09-10T22:04:25.900 回答
0

我不确定您是否只想在 layer1 div 中添加排序（或在其他 dom 元素中拖放。）无论您想要什么，我都会使用 Knockout-Sortable 插件（https://github.com/rniemeyer /淘汰赛可排序）。

它适用于我使用 Knockout（命名模板嵌套多层）的复杂排序、拖放解决方案。

检查该页面底部的 JSFiddles 以开始使用。

希望有帮助。

于 2013-09-10T22:08:07.227 回答
0

尝试阅读下一篇文章 - Revisiting Dragging, Dropping, and Sorting observableArrays 它包含详细的解释和示例数量。

于 2013-09-10T21:31:20.073 回答