JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

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

CSS

#resizable {
    position: relative;
    width: 200px;    
    height: 200px;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Small_Flag_of_the_United_Nations_ZP.svg/488px-Small_Flag_of_the_United_Nations_ZP.svg.png") ;
    background-size:cover;
    background-repeat:no-repeat;
    // background-position:center;
}

#resizable .resizer {
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: 0;
    right: -10px;
    background: orange;
    opacity: .5;
    cursor: pointer;
}

JavaScript

var resizable = d3.select('#resizable');
var resizer = resizable.select('.resizer');

var dragResize = d3.behavior.drag()
    .on('drag', function() {
        // Determine resizer position relative to resizable (parent)
        x = d3.mouse(this.parentNode)[0];
        y = d3.mouse(this.parentNode)[1];
        
        console.log(x, y);
        // Avoid negative or really small widths
        x = Math.max(50, x);
        y = Math.max(50, y);
        
        resizable
        	.style('background-size', x + 'px' + ' ' + y + 'px')
        	.style('width', x + 'px')
        	.style('height', y + 'px')
        ;
        
        resizer
        	.style('left', x + 'px')
          .style('top', y + 'px')
        ;
    })


resizer.call(dragResize);