Update style "LEFT" with knockout.js and draggable

1
votes

I would like to update the left property while dragging, but my property still says 50 when dragging. I know Im not doing something right, any help?

games: ko.observableArray([
 { left: ko.observable(50) },
 { left: ko.observable(50) },
 { left: ko.observable(50) }
];

<div class="bracket-game" data-bind="bracketGameInit: { left: left }">



ko.bindingHandlers.bracketGameInit = {
        init: function (element, valueAccessor) {

            var values = ko.utils.unwrapObservable(valueAccessor());
            $(element).draggable();
            ko.bindingHandlers.style.update(element, function () { return { left: (values.left() + 'px') }; });

        }
    };
1
knockout.js

1 Answers

2
votes

I think that you would want to respond to the draggable drag event (or stop if you only want to update it at the end).

Maybe something like:

ko.bindingHandlers.bracketGameInit = {
    init: function (element, valueAccessor) {
        var left = valueAccessor();

        $(element).draggable({
            drag: function(event, ui) {
                left(ui.position.left);
            }                    
        });
    },
    update: function(element, valueAccessor) {
        var left = valueAccessor();
        $(element).css("left", left());
    }
};

Here is a sample: http://jsfiddle.net/rniemeyer/Na8K7/