Question

我有一个可观察的数组，我添加或删除元素。元素显示为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>

任何建议都将不胜感激！

Answer 1

这是custom bindings的工作。要点是你创建自己的绑定，所以标记看起来像这样：

<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绑定初始化函数之外，您不需要返回任何内容，您可以创建一个执行逻辑的包装器绑定，并且就像您返回的绑定一样。在学习自定义绑定时，这通常是一个很好的起点。

Answer 2

尝试阅读下一篇文章 - Revisiting Dragging, Dropping, and Sorting observableArrays 它包含详细的说明和样本数量。

Answer 3

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

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

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

希望有所帮助。

Knockoutjs和Jquery可拖动的div

3 个答案: