JSFiddle - React, Tailwind, and code Playground

by jasonWidgets

HTML

<div id="resizable" class="resizable">

</div>

CSS

.resizable {
  height:150px;
  width:200px;
  border:1px solid orange;
  position:absolute;
}

JavaScript

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/**
 * TODO: 
 *  1) Add support for mobile.
 *  2) Support resizing diagonally.
 */

/**
 * jwResizer Resize Manager
 * @constructor
 * @description Auxiliary class, that manages drag/resize for HTMLElements. Part of jasonwidgets.com
 */
function jwResizer(htmlElement, options) {
    this.options = options ? options : {};
    if (!this.options.margins) {
        this.options.margins = 5;
    }
    if (!this.options.minWidth) {
        this.options.minWidth = 30;
    }
    if (!this.options.minHeight) {
        this.options.minHeight = 30;
    }
    this._mouseMoveEvent = null;
    this.htmlElement = htmlElement;
    this._mousePositionInfo = {
        onTopEdge: false,
        onLeftEdge: false,
        onRightEdge: false,
        onBottomEdge: false,
        mousePixelsDifferenceLeft: null,
        mousePixelsDifferenceTop: null,
        mousePixelsDifferenceBottom: null,
        mousePixelsDifferenceRight:null,
        elementRect: null,
        canResize:false
    }
    this._onMouseDown = this._onMouseDown.bind(this);
    this._onMouseMove = this._onMouseMove.bind(this);
    this._onMouseUp = this._onMouseUp.bind(this);
    this._monitorCanvas = this._monitorCanvas.bind(this);
    this._resizing = false;
    this._updatingMouseInfo = false;
    this._initializeEvents();
    this._monitorCanvas();
}

/**
 * Mouse move event.
 */
jwResizer.prototype._onMouseMove = function (event) {
    this._mouseMoveEvent = event;
}

/**
 * Mouse down event.
 */
jwResizer.prototype._onMouseDown = function (event) {
    this._resizing = this._mousePositionInfo.canResize;
}

/**
 * Mouse up event.
 */
jwResizer.prototype._onMouseUp = function (event) {
    this._resizing = false;
}

/**
 * Function running within a requestAnimationFrame, to improve performance and reduce...