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

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

by rniemeyer

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">
<div data-bind="resizable: { animate: true  }, draggable: { cursor: 'crosshair' }"></div>

CSS

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

JavaScript

ko.bindingHandlers.resizable = {
    init: function(element, valueAccessor) {
         var options = valueAccessor();
         $(element).resizable(options);
    }  
};

ko.bindingHandlers.draggable = {
    init: function(element, valueAccessor) {
         var options = valueAccessor();
         $(element).draggable(options);
    }  
};

ko.applyBindings({});