JSFiddle - React, Tailwind, and code Playground

by greenlaw110

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css">
<script src="https://github.com/greenlaw110/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<div id="div1" class="draggable resizable ui-widget-content"></div>

<div id="div2" class="draggable resizable ui-widget-content"></div>

<div id="div3" class="draggable resizable ui-widget-content"></div>

CSS

.draggable.resizable { width: 150px; height: 150px; padding: 0.5em; position: absolute}

#div2 {top: 50px; left: 200px;}

#div3 {top: 200px; left: 10px;}

JavaScript

(function($){
    var KO = ko.observable;
    $.fn.koDraggableResizable = function() {
        return this.each(function(id, draggableResizable){
            var $el = $(draggableResizable), viewModel = {
                x: KO(0),
                y: KO(0),
                w: KO(0),
                h: KO(0),
                track: function(element, event, ui) {
                    if (ui.size) {
                        this.w(ui.size.width);
                        this.h(ui.size.height);
                    } else {
                        this.x(event.pageX);
                        this.y(event.pageY);
                    }
                    return true;
                }
            };
            $.each(['x', 'y', 'w', 'h'], function(){
                $('<p></p>').html(this + ': <span data-bind="text: ' + this + '"></span>').appendTo($el);
            });
            $el.attr('data-bind', 'event: {drag: track,resize: track}');
            ko.applyBindings(viewModel, $el.get(0));
            $el.draggable().resizable();
        });
    }
})(jQuery);

$('.draggable.resizable').koDraggableResizable();