JSFiddle - React, Tailwind, and code Playground

by jcpmcdonald

HTML

<div id="world">
<div id="dragme">
    <div draggable="true" id="title">
        This is a title, drag me.
    </div>
    <div draggable="false" style='-moz-user-select: none;-webkit-user-select: none;' onselectstart='return false;'>
        Testing a body<br/>with some lines
    </div>
</div>

<div id="debug">
    <br/>
    <br/>
    <br/>
    <br/>
</div>
</div>

CSS

#dragme{ 
    position:  absolute;
    left: 0;
    top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
    width: 200px; 
    background: rgba(255,255,255,0.66); 
    border: 2px  solid rgba(0,0,0,0.5); 
    border-radius: 4px 4px 0px 0px;
    padding: 0px;
}

#title{
    background: rgba(150,150,150,0.66); 
}

#world
{
    border: 1px;
    width: 90%;
    height: 500px;
    background: rgba(200,255,255,0.66); 
}

JavaScript

// Draggable Test


function debugPrint(text) {
    //$("#debug").append(text + "<br/>");
}

var startX = -1;
var startY = -1;


function drag_start(event) {

    //debugPrint("drag_start: " + event.clientX + ", " + event.clientY);
    
    var titleDivStyle = window.getComputedStyle(event.target, null);    
    var draggableDivStyle = window.getComputedStyle(event.target.parentNode, null);
    
    
    startX = -event.clientX + parseInt(draggableDivStyle.getPropertyValue("left"),10);
    startY = -event.clientY + parseInt(draggableDivStyle.getPropertyValue("top"),10);
    
    
    
    //alert(style);
    //alert(startX + ", " + startY);
    /*
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("text/plain",
    (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
    */
} 
function drag_over(event) {
    debugPrint("drag_over");
    
    //alert("Data = " + event.dataTransfer.getData("text/plain"));
    
    var style = window.getComputedStyle(event.target, null);
    var dm = document.getElementById('dragme');
    dm.style.left = event.clientX + startX + 'px';
    dm.style.top = event.clientY + startY + 'px';
    
    /*
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('dragme');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    */
    
    event.preventDefault(); 
    return false; 
}

function drop(event) {
    debugPrint("drop");
    /*
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('dragme');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    */
    
    event.preventDefault();
    return false;
}

debugPrint("1");
var dm =...