JSFiddle - React, Tailwind, and code Playground

by MatteS75

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">
<div class="layer" style="width: 150px;">
<div class="left ui-resizable-handle ui-resizable-w">
    <div><<< div</div>
</div>
<div class="right ui-resizable-handle ui-resizable-e">>>></div>
</div>

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

$.widget("ui.myresizable", $.ui.resizable, {

    _mouseCapture: function(event) {
        var handle = false;
        for (var i in this.handles) {
            if ($(this.handles[i])[0] == event.target  || $(this.handles[i]).has(event.target)) {
                handle = true;
            }
        }

        return !this.options.disabled && handle;
    }

});

$('.layer')
    .draggable()
    .myresizable({
    handles: null
});