使用 knockout.js 和可拖动更新样式“LEFT”答案

【问题标题】：Update style "LEFT" with knockout.js and draggable使用 knockout.js 和可拖动更新样式“LEFT”
【发布时间】：2012-06-29 19:38:10
【问题描述】：

我想在拖动时更新左侧属性，但拖动时我的属性仍然显示 50。我知道我做的不对，有什么帮助吗？

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') }; });

        }
    };

【问题讨论】：

标签： knockout.js

【解决方案1】：

我认为您可能希望响应可拖动的drag 事件（如果您只想在最后更新它，则为stop）。

可能是这样的：

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());
    }
};

这是一个示例：http://jsfiddle.net/rniemeyer/Na8K7/

【讨论】：