JSFiddle - React, Tailwind, and code Playground

by jearles

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/mbest/knockout-deferred-updates/master/knockout-deferred-updates.js"></script>
<div class="layer" data-bind="resizable: {left: left, width: width}">
<div class="left ui-resizable-handle ui-resizable-w"><<<</div>
<div class="right ui-resizable-handle ui-resizable-e">>>></div>
</div>

<br>
<br>

<input type="text" data-bind="value: left" />
<input type="text" data-bind="value: width" />

CSS

.layer, .left, .center, .right {
    float: left;
    padding: 2px;
    margin: 2px;
    border: 1px solid black;
}

.right.ui-resizable-e {
    width: auto;
    height: auto;
    top: auto;
    right: 0px;
}
.right.ui-resizable-handle {
    font-size: inherit;
}

.left.ui-resizable-w {
    width: auto;
    height: auto;
    top: auto;
    left: 0px;
}
.left.ui-resizable-handle {
    font-size: inherit;
}

JavaScript

ko.bindingHandlers.resizable = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var values = valueAccessor();
        $(element).resizable({
            handles: null,
            resize: function(event, ui) {
                console.log("resizable resize (left/width) " + ui.position.left + " " + ui.size.width);
                console.log("resizable resize left");
                values.left(ui.position.left);
                console.log("resizable resize width");
                values.width(ui.size.width);
            }
        });
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        console.log("resizable update");
        var values = valueAccessor();
        $(element)
            .css('left', values.left() + 'px')
            .css('width', values.width() + 'px')
            ;
    }
};

var vm = {
    left: ko.observable(50),
    width: ko.observable(300)
    };

ko.applyBindings(vm);