JSFiddle - React, Tailwind, and code Playground

by dymond

HTML

<div id="page-wrapper">
      <input type="button" value="New Box" onclick="box()">
        <div id="page-content-wrapper"></div>

<div class='draggable green'>    <div class='hand'>Drag</div></div>
<div class='draggable blue'>    <div class='hand'>Drag</div></div>
<div class='draggable yellow'>    <div class='hand'>Drag</div></div>
<div class='draggable black'>    <div class='hand'>Drag</div></div>
<div class='draggable lime'>    <div class='hand'>Drag</div></div>

CSS

.box {
 
    width : 100px;
    height : 100px;
    position : absolute;
 background-color:red;
}

.hand{
       width: 48px;
        min-height: 12px;
       background: yellow;
    z-index:1;
    border:1px solid black;
}

.draggable {
    position: absolute;
    width: 50px;
    height: 50px;

}
.red {
    background: red;
    top: 10px;
    left: 10px;
}
.green {
    background: green;
    top: 10px;
    left: 70px;
}
.blue {
    background: blue;
    top: 10px;
    left: 250px;
}
.yellow {
    background: yellow;
    top: 10px;
    left: 310px;
}
.black {
    background: black;
    top: 10px;
    left: 130px;
}
.lime {
    background: lime;
    top: 10px;
    left: 190px;
}

JavaScript

function createElementWithClass(elementName, className) {
    var el = document.createElement(elementName);
    el.className = className;
    return el;
}

/*###CREATE ELEMENT WITHOUT CLASS ###*/
function createElementWithOutClass(elementName) {
    var el = document.createElement(elementName);
    return el;

}
/*###CREATE ELEMENT WITH ID ###*/
function createElementWithId(elementName, idName) {
    var element = document.createElement(elementName);
    element.id = idName;
    return element;
}

function box() {
    outerDiv = createElementWithClass('div', 'box'),
    innerDiv = createElementWithClass('div', 'clock-menubar-wrapper');
    outerDiv.appendChild(innerDiv);
    document.getElementById("page-content-wrapper").appendChild(outerDiv);

    clock_windows_wrapper_close = createElementWithClass('div', 'hand');
    innerDiv.appendChild(clock_windows_wrapper_close);

    clock_toolbar_wrapper_close = createElementWithClass('div', 'clock-content-wrapper');
    outerDiv.appendChild(clock_toolbar_wrapper_close);
}

(function (document) {


    
    
    var draggable = document.getElementsByClassName('hand'),
        draggableCount = draggable.length,
        i, currZ = 1;


    function startDrag(evt) {

        var diffX = evt.clientX - this.parentNode.offsetLeft,
        diffY = evt.clientY - this.parentNode.offsetTop,
            that = this;

        this.parentNode.style.zIndex = currZ++;

        function moveAlong(evt) {
    that.parentNode.style.left = (evt.clientX - diffX) + 'px';
    that.parentNode.style.top = (evt.clientY - diffY) + 'px';
        }


        function stopDrag() {
            document.removeEventListener('mousemove', moveAlong);
            document.removeEventListener('mouseup', stopDrag);
        }

        document.addEventListener('mouseup', stopDrag);
        document.addEventListener('mousemove', moveAlong);
    }

    for (i = 0; i < draggableCount; i += 1) {
        draggable[i].addEventListener('mousedown', startDrag);
   ...