JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<textarea id="link_grabber"></textarea>
<div id="notice">Drop a link on me! :)<br /><span>Waiting...</span></div>

CSS

body, html { height: 100%; }
body { margin: 0; padding: 0; background-color: #ebebeb; font-family: Arial; font-size: 12px; color: #363636; }
#notice { padding-top: 42px; background-image: url('http://cdn4.iconfinder.com/data/icons/fatcow/32x32_0540/link_add.png'); background-repeat: no-repeat; background-position: top center; text-align: center; font-size: 25px; text-shadow: 0px 1px 0px #FFF; margin-top: 15%; }
#notice > span { font-size: 12px; }
#link_grabber { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; }
#link_grabber.active { display: block; opacity: 0.01; }

JavaScript

$("body").bind("dragenter dragover", function(){
    $("#link_grabber").addClass("active");
    $("#notice > span").text("Drop it...you know you wanna.");
}).bind("dragleave dragexit", function(){
    $("#notice > span").text("Waiting...");
});

setInterval(function(){
    if($("#link_grabber").val() != ""){
        var val = $("#link_grabber").val();
        $("#link_grabber").val("").removeClass("active");
        $("#notice > span").text("Your link is: "+val);
    }
}, 100);