JSFiddle - React, Tailwind, and code Playground

by paulwesterberg

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p>This is text to drag into the input box.</p>
    <input type="text"/>
<span></span>


</body>
</html>

CSS

span { color:red; }

JavaScript

function trace(str) {
    $("span").html($("span").html() + "<br/>" + str);
}

var inputField = $("input");
var oldValue = inputField.text();
inputField.bind("drop", function() {
    //when the drop happens the input value will not be updated yet
    trace("drop happened in " + this.nodeName + " value: " + this.value);
    //use a timeout to allow the input value to change.
    setTimeout($.proxy(function() {
        trace("Afterdrop happened in " + this.nodeName + " value: " + this.value);
        if (this.value !== oldValue) {
            $(this).trigger('change');
        }
    }, this), 0);
});
$("input").bind("change", function() {
    trace("Changed, value: " + this.value + " oldValue: " + oldValue);
    oldValue = this.value;
});