JSFiddle - React, Tailwind, and code Playground

by korimako

HTML

<iframe id='if1' style="width:200px; height:200px; border:1px solid #CCC; position:absolute; right:0; bottom:0;"></iframe>

JavaScript

var i = document.getElementById('if1');
var startX, startY, startW, startH
var onDragStart = function(e){
    startX = e.screenX;
    startY = e.screenY;
    startW = i.clientWidth;
    startH = i.clientHeight;
}
var onDrag = function(e){
    if(e.x < 0) return;
    var w = startW + startX - e.screenX;
    var h = startH + startY - e.screenY;
    i.style.width = w + 'px';
    i.style.height = h + 'px';
}
var c = document.createDocumentFragment();
var d = document.createElement('div');
d.style.width = '10px';
d.style.height = '10px';
d.style.backgroundColor = '#CCC';
d.draggable = true;
d.addEventListener('dragstart', onDragStart);
d.addEventListener('drag', onDrag);
c.appendChild(d);
var iBody = i.contentDocument.body;
iBody.style.margin = 0;
iBody.appendChild(c);