JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<!-- Resize Div -->
<div id="wrapper">
    <div id="text_wrap">
        <div id="draggable-element">Drag me!</div>
        <div class="text-field" contenteditable="true" id="text-field"></div>
        <div id="resize-handler" class="resize-handler"></div>
    </div>
</div>

CSS

body {
    padding:10px
}
#wrapper {
    margin:5px;
    padding:10px;
    border:0px solid #ccc;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    top:0;
}
#text_wrap {
    width:250px;
    border:1px solid #ccc;
    position:absolute;
}
#draggable-element {
    min-height:20px;
    color:white;
    padding:10px 12px;
    cursor:move;
    background:#ccc;
}
.text-field {
    min-height:50px;
    padding:5px;
    outline:none;
    border:1px dashed #ccc;
    margin:5px;
}
.resize-handler {
    height:20px;
    width:20px;
    right:-12px;
    bottom:-12px;
    border-radius:15px;
    position:absolute;
    border:1px solid #ccc;
    cursor:se-resize;
    background:#fff;
}

JavaScript

/*********************************
 ****   Drag and Resize Osk   ****
 *********************************/
var dragBoxHandler, resizeHandler, textWrapper, textField, dragOn, resizeOn;

var currX=0, currY=0, prevX=0,prevY=0, H0=0, W0=0, top0=0,left0=0;

// select elements
dragBoxHandler = document.getElementById("draggable-element");
resizeHandler = document.getElementById("resize-handler");
textWrapper = document.getElementById("text_wrap");
textField = document.getElementById("text-field");

//
dragOn = false;
resizeOn = false;

function dragInit(e){
    dragOn = true;
    prevX = e.pageX;
    prevY = e.pageY;
    //console.log(prevX,prevY);
}

function resizeInit(){
    resizeOn = true
    prevX = e.pageX;
    prevY = e.pageY;
}

function dargTextBox(e){
    if(dragOn){
        currX = e.pageX;
        top0 = textWrapper.style.offsetTop;
        left0 = textWrapper.style.offsetLeft;
        
        textWrapper.style.top = top0 + currY - prevY;
        textWrapper.style.left = left0 + currX - prevX;
    }
    prevX = currX;
    prevY = currY;
    console.log(prevX,prevY);
}

function resizeTextBox(){
    if(resizeOn){
    }
}

//event
dragBoxHandler.onmousedown = dragInit;
document.onmousemove = dargTextBox;