JSFiddle - React, Tailwind, and code Playground

by b_m_h

HTML

<body style="border: 1px solid black;">
        <div id="d0" style="border: 1px solid black;">drag files onto this page</div>
        <div id="d1" style="border: 1px solid black; display: none; background-color: red;">-&gt; drop here &lt;-</div>
        <div id="d2" style="border: 1px solid black;">and stuff will happen</div>
        <div style="float: left;">mouse them all over&nbsp;</div>
        <div style="float: left;">these elements</div>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <div draggable=true>draggable</div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        
    </script>

JavaScript

var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'FileDragImg')
canvas.setAttribute('width', 120);
canvas.setAttribute('height', 40)
var ctx = canvas.getContext('2d');

function drawTag(x, y) {
  var radius = 20;
  var innerWidth = 80;
  var width = radius + innerWidth + radius;
  var height = 30;
  ctx.beginPath();
  ctx.moveTo(x + radius,y)
  ctx.lineTo(x + radius + innerWidth, y);
  ctx.bezierCurveTo(width, y, width, y + height, x + radius + innerWidth, y + height);
  ctx.lineTo(x+radius,y+height);
  ctx.bezierCurveTo(x, y + height, x, y, x + radius, y);

  ctx.stroke();
  ctx.fillStyle = '#1CA1D4';
  ctx.fill();
}

drawFileDragTag = function (numOfFiles) {
  for(var i = numOfFiles; i > 0; i--) {
    drawTag(1, 1+i*4);
  }
}

drawFileDragTag(2);


ctx.fillStyle = '#fff';
ctx.font="14px SourceSans";
ctx.textAlign = 'center';
ctx.fillText("2 files",60,25);

var resetTimer;

        var reset = function()
        {
            $('#d1').hide();
        };

        var f = function(e)
        {
            var srcElement = e.srcElement? e.srcElement : e.target;
            
            var dragIcon = document.createElement('img');
            dragIcon.src = canvas.toDataURL();
            dragIcon.width = 100;
            console.log(dragIcon);
            e.dataTransfer.setDragImage(dragIcon, 0, 0);
            //$('html').css('cursor', 'url('+canvas.toDataURL()+'),auto')

            if ($.inArray('Files', e.dataTransfer.types) > -1)
            {
                e.stopPropagation();
                e.preventDefault();
                

                if (e.type == "dragover")
                {
                    if (resetTimer)
                    {
                        clearTimeout(resetTimer);
                    }
                    $('#d1').show();
                    console.info('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.types is ' + e.dataTransfer.types +...