Knockout Draggable Issue

by vextasy

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id='draggable'>
    <h3>Draggable </h3>
    <input data-bind='value: detail'></input>
    <span data-bind='click: saveEdit'>Save</span>
</div>
<div id='fixed'>
    <h3>Fixed </h3>
    <input data-bind='value: detail'></input>
    <span data-bind='click: saveEdit'>Save</span>
</div>

CSS

#draggable, #fixed {
    background-color: lightblue;
}

JavaScript

VM = {
    detail: ko.observable('Cat'),
    saveEdit: function(){
        alert(this.detail()); 
    }
};

$(document).ready(function() {
    $("#draggable").draggable();
    ko.applyBindings(VM);
});