Using Raphael the JavaScript graphics library.

In this example, I go over a simple use of Raphael.js. It draws 4 boxes on the page and allows you to move and resize each independently.

Here is the graphics library (licenses under the MIT license):
https://dmitrybaranovskiy.github.io/raphael/

Here is my code on GitHub.

https://www.youtube.com/watch?v=RVXQWsFDDgU

The basic gist of it is to initialize the primary Raphael object and apply it to the page. After that you create the boxes you want to draw and associate them with a “drag” function that is called when the user interacts with each box.

Here is a selection of the code below:

// Define 4 boxes to draw on screen
var boxListing = [
    { x: '10', y: '10', width: '70', height: '70', boxname: 'Box 1' },
    { x: '110', y: '10', width: '70', height: '70', boxname: 'Box 2' },
    { x: '210', y: '10', width: '80', height: '80', boxname: 'Box 3' },
    { x: '310', y: '10', width: '90', height: '90', boxname: 'Box 4' }
];

// Values that define the graphical properties of the page
var raphObject;
var dragIconSize = 10;

// The primary function of this page
function startup() {
    // Initialize the main graphics object that is used to draw the box icons
    raphObject = Raphael('canvasdiv', 1000, 752);
    drawBoxes();
}

// Start, move, and up are the drag functions
move_start = function () {
    // Storing original coordinates
    this.ox = this.attr('x');
    this.oy = this.attr('y');
    this.attr({ opacity: 0.5 });

    // The resizer box
    this.resizer.ox = this.resizer.attr('x');
    this.resizer.oy = this.resizer.attr('y');
    this.resizer.attr({ opacity: 0.5 });

    // The box text
    this.boxtext.ox = this.attr('x') + (parseInt(this.attr('width')) / 2);
    this.boxtext.oy = this.attr('y') + (parseInt(this.attr('height')) / 2);
    this.boxtext.attr({ opacity: 0.5 });
};

// Visually change the box when it is being moved
move_drag = function (dx, dy) {
    // Move will be called with dx and dy
    this.attr({ x: this.ox + dx, y: this.oy + dy });
    this.resizer.attr({ x: this.resizer.ox + dx, y: this.resizer.oy + dy });
    this.boxtext.attr({ x: this.boxtext.ox + dx, y: this.boxtext.oy + dy });
};

// When the user lets go of the mouse button, reset the square's properties
move_up = function () {
    // Restoring the visual state
    this.attr({ opacity: 1 });
    this.resizer.attr({ opacity: 1 });
    this.boxtext.attr({ opacity: 1 });
    // Here is where you would update the box's position externally
    // ...
};

resize_start = function () {
    // Storing original coordinates
    this.ox = this.attr('x');
    this.oy = this.attr('y');

    // The resizer box
    this.resizer.ow = this.resizer.attr('width');
    this.resizer.oh = this.resizer.attr('height');

    // The box text
    this.boxtext.ox = this.resizer.attr('x') + (parseInt(this.resizer.attr('width')) / 2);
    this.boxtext.oy = this.resizer.attr('y') + (parseInt(this.resizer.attr('height')) / 2);
};

resize_drag = function (dx, dy) {
    // Move will be called with dx and dy
    this.attr({ x: this.ox + dx, y: this.oy + dy });
    this.resizer.attr({ width: this.resizer.ow + dx, height: this.resizer.oh + dy });
    this.boxtext.attr({ x: this.boxtext.ox + (dx / 2), y: this.boxtext.oy + (dy / 2) });
};

resize_up = function () {
    // Here is where you would update the box's position externally
    // ...
};

// Draw all of the boxes in the JSON object
function drawBoxes() {
    // Working arrays
    var boxList = [];
    var boxListText = [];
    var boxListDrag = [];

    // Loop through all boxes in the JSON object
    for (var i = 0; i < boxListing.length; i++) {
        // Extract the positional data from the JSON array
        var px = parseInt(boxListing[i].x);
        var py = parseInt(boxListing[i].y);
        var pw = parseInt(boxListing[i].width);
        var ph = parseInt(boxListing[i].height);

        // Position text in the center of the box
        var textx = px + (pw / 2);
        var texty = py + (ph / 2);

        // Deal with this individual box, position it and show a status based on color
        boxList[i] = raphObject.rect(px, py, pw, ph)
            .attr('fill', '#aaaaaa');
        
        boxListText[i] = raphObject.text(textx, texty, boxListing[i].boxname)
            .attr('font', '12px Arial')
            .attr('fill', '#000000');
        
        // Position the drag icon
        var dragBoxX = px + pw - dragIconSize;
        var dragBoxY = py + ph - dragIconSize;

        // Create the drag icon for this box
        boxListDrag[i] = raphObject.rect(dragBoxX, dragBoxY, dragIconSize, dragIconSize)
            .attr({
                fill: '#00aabb',
                stroke: 'solid',
                opacity: 1
            });

        // Define relations and functions for moving and resizing
        // Move the boxes
        boxList[i].drag(move_drag, move_start, move_up);
        boxList[i].resizer = boxListDrag[i];
        boxList[i].boxtext = boxListText[i];

        // Resize the boxes
        boxListDrag[i].drag(resize_drag, resize_start, resize_up);
        boxListDrag[i].resizer = boxList[i];
        boxListDrag[i].boxtext = boxListText[i];
    }
}