Knockoutjs and jQuery UI: How to bind .resizable().draggable()?

http://stackoverflow.com/questions/6338773/knockoutjs-and-jquery-ui-how-to-bind-resizable-draggable

by inser

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">
<input type="text" data-bind="value: x" />
<input type="text" data-bind="value: x" />
<input type="text" data-bind="value: y" />

<div data-bind="draggable: { drag: drag }"></div>
<div class="wrapper">
</div>

<input type="button" value="add draggable" />

CSS

div { background-color: #CCC; height: 200px; width: 200px; }

JavaScript

ko.bindingHandlers.draggable = {
    init: function(element, valueAccessor) {
         var options = valueAccessor();
        
        var opts = {
            grid: [5,5],
            drag: function(event, ui) {
                options.drag(event, ui);
                
            }
        }
         $(element).draggable(opts).disableSelection();        
    }  
};

var model = function(x, y) {
    var self = this;
    this.x = ko.observable(x);
    this.y = ko.observable(y);
    this.getPosition = ko.computed(function() {
        return { left: self.x, top: self.y };
    });
    
    this.resize = function(event, ui) {
        console.log(event, ui);
    }
    
    this.drag = function(event, ui) {
        self.x(ui.position.left);
        self.y(ui.position.top);
    }
    
    this.init = function() {  ko.applyBindings(self); }
    
    
}

var m = new model(100, 100);
m.init();

$('[type=button]').click(function() {
    $('.wrapper').append('<div data-bind="draggable: { drag: drag }"></div>');
    return false;
});