JSFiddle - React, Tailwind, and code Playground

by MatteS75

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<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="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>
<!-- ko foreach: layers-->

<div class="container">
    <div class="layer" 
    data-bind="
    attr: {'id': id},
    editlayer: { left: left, width: width, active: editable }
    ">
        <div class="layer-border"></div>
    </div>
</div>

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

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

<br>

<!-- /ko -->

CSS

body
{
    padding: 30px;
}
.container
{
    position: relative;
    border: 1px solid lightgray;
    height: 50px;
    margin: 10px;
    padding: 10px;
}
.layer
{
    position: absolute;
    background-color: rgb(85, 187, 85);
    height: 50px;
}
.layer:hover
{
    cursor: pointer;
}
.layer.ui-moveable .layer-border
{
    position: absolute;
    height: 40px;
    width: 100%;
    border-top: 5px solid rgba(255, 255, 255, 0.35);
    border-bottom: 5px solid rgba(255, 255, 255, 0.35);
}
.layer
{
    -webkit-border-radius: 4px 4px 4px 4px;
       -moz-border-radius: 4px 4px 4px 4px;
            border-radius: 4px 4px 4px 4px;
}

.ui-editlayer .ui-move-handle, 
.ui-editlayer .ui-stretch-handle {
    padding-left: 10px;
    padding-top: 10px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.35);
}
.ui-editlayer .ui-move-handle {
    width: 40px;
}
.ui-editlayer .ui-stretch-handle {
    width: 20px;
}
.ui-editlayer .ui-move-cursor,
.ui-editlayer .ui-stretch-cursor {
    cursor:hand;
    cursor:grab;
    cursor:-moz-grab;
    cursor:-webkit-grab;
}
.ui-editlayer .ui-move-handle .ui-rib-vertical,
.ui-editlayer .ui-stretch-handle .ui-rib-vertical{
    float: left;
    margin-top: 5px;
    margin-right: 4px;
    height: 30px;
    width: 1px;
    border-left: 2px solid rgba(255, 255, 255, 0.5);
    border-right: 2px solid rgba(255, 255, 255, 0.3);
    -webkit-border-radius: 4px 4px 4px 4px;
       -moz-border-radius: 4px 4px 4px 4px;
            border-radius: 4px 4px 4px 4px;
}
.ui-editlayer .ui-move-handle .ui-rib-horizontal,
.ui-editlayer .ui-stretch-handle .ui-rib-horizontal{
    margin-top: 4px;
    height: 1px;
    width: 30px;
    border-top: 2px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    -webkit-border-radius: 4px 4px 4px 4px;
       -moz-border-radius: 4px 4px 4px 4px;
            border-radius: 4px 4px 4px 4px;
}

.ui-draggable-dragging .ui-grab-cursor
{
    cursor:grabbing;
    cursor:-moz-grabbing;
  ...

JavaScript

$.widget("ui.editlayer", {

    options: {
        drag: function () { },
        resize: function () { },
        stop: function () { },
        left: null,
        width: null,
        top: null,
        active: true
    },

    _createStretchHandle: function () {
        var handle = $('<div>').addClass('ui-stretch-handle').addClass('ui-stretch-cursor');
        //var rib = $('<div>').addClass('ui-rib-vertical');
        //handle.append(rib.clone());
        //handle.append(rib.clone());
        return handle;
    },

    _centerMoveHandle: function () {
        this._moveHandle.position({
            my: 'center center',
            at: 'center center',
            of: this._layer
        });
    },

    _positionLeftStretchHandle: function () {
        this._leftStretchHandle.position({
            my: 'left center',
            at: 'left center',
            of: this._layer
        });
    },

    _positionRightStretchHandle: function () {
        this._rightStretchHandle.position({
            my: 'right center',
            at: 'right center',
            of: this._layer
        });
    },

    _createMoveHandle: function () {
        var handle = $('<div>').addClass('ui-move-handle').addClass('ui-move-cursor');
        //var rib = $('<div>').addClass('ui-rib-vertical');
        //handle.append(rib.clone());
        //handle.append(rib.clone());
        //handle.append(rib.clone());
        //handle.append(rib.clone());
        return handle;
    },

    // because in jquery ui containment is handled differently between draggable and resizable
    // so we do this ourselfs
    // we dont handle border yet though...
    _handleContainment: function (ui) {
        var previousWidth = this.options.width;
        var width = ui.size ? ui.size.width : previousWidth;
        var left = ui.position.left;
        var right = width + left;
        var top = this.options.top;
        var minLeft = parseInt(this._container.css("paddingLeft"), 10) || 0;
        var...