Knockoutjs和Jquery可拖动div

Question

I have an observable array that I add or remove elements to. The elements are displayed as DIVs. I want to make each DIV draggable, however because the DIV is created on the fly I am not sure how to do this. I was thinking of using the JQuery live() function, but I need to pass and action, so I dont think this would be the right approach.

This is my code: Knockout:

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>

Any suggestions would be greatly appreciated!

Answer 1

This is a job for custom bindings . The gist is you create your own binding so you markup looks like this:

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

The custom binding would be:

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

You don't need to return anything but by calling the with binding init function, you create a wrapper binding that performs your logic and and acts like the binding you're returning. It's generally a good place to start when learning custom bindings.

Answer 2

尝试阅读下一篇文章- 重新审视observableArrays的拖放，拖放操作，其中包含详细的解释和样本数量。

Answer 3

I'm unsure whether you just want to add sorting within your layer1 div (or dragging and dropping amongst other dom elements.) Regardless of what you want I'd use the Knockout-Sortable plugin ( https://github.com/rniemeyer/knockout-sortable ).

It worked for me on a complex sort, drag and drop solution with Knockout (named templates nested multiple layers.)

Check the JSFiddles at the bottom of that page to get started.

Hope that helps.