Draggable binding

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<div data-bind="draggable: position"
     style="position:absolute;">
    This is a draggable div
</div>
<ul>
    <li>Top: <input type="textbox" data-bind="value: position().top"/></li>
    <li>Left: <input type="textbox" data-bind="value: position().left"/></li>
    <li>Width: <input type="textbox" data-bind="value: position().width"/></li>
    <li>Height: <input type="textbox" data-bind="value: position().height"/></li>
</ul>
<pre data-bind="text:JSON.stringify(ko.toJS($root),null,2)"></pre>

CSS

div {
    border: solid 1px #444;
    background-color: #DDD;
    text-align: center;
    padding: 12px;
}

JavaScript

// http://knockoutjs.com/documentation/custom-bindings.html
ko.bindingHandlers.draggable = {
     init : function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        var $element = $(element);
        var position = ko.unwrap(valueAccessor());
        var draggable = $element.resizable({
            stop: function(event,ui) {
                if (position) {
                    if (ko.isWritableObservable(position.left))
                       position.left(ui.position.left);
                    if (ko.isWritableObservable(position.top))
                       position.top(ui.position.top);
                    if (ko.isWritableObservable(position.height))
                       position.height($element.height());
                    if (ko.isWritableObservable(position.width))
                       position.width($element.width());
                }
            }
        });
    },
    update : function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever any observables/computeds that are accessed change
        // Update the DOM element based on the supplied values here.
        var position = ko.unwrap(valueAccessor());
        var $element = $(element);
        if (position.left)
			$element.css({left:ko.unwrap(position.left)+'px'});
        if (position.top)
			$element.css({top:ko.unwrap(position.top)+'px'});
        if (position.height)
            $element.height(ko.unwrap(position.height));
        if (position.width)
            $element.width(ko.unwrap(position.width));
    }
};

var vm = {
    position: ko.observable({
    	left: ko.observable(150),
    	top: ko.observable(125),
    	width: ko.observable(100),
    	height: ko.observable(40)
   ...