JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<div id="foo"></div>

<textarea rows="100"></textarea>

CSS

#foo {
    width: 50px;
    height: 50px;
    border: solid 1px;
    margin-bottom: 20px;
}

JavaScript

var textarea = $("textarea");
var el = $("#foo");

$(document).on("click", docClick);

function docClick() {
    textarea.val("DOC CLICK\n" + textarea.val());
}
function mousemove(e) {
    textarea.val(e.pageX + " " + e.pageY + "\n" + textarea.val());
    e.preventDefault();
}
function mouseup(e) {
    textarea.val("MOUSEUP\n" + textarea.val());
    $(document).off("mousemove", mousemove);
    $(document).off("mouseup", mouseup);
}

el.on("mousedown", function(e) {
    textarea.val("");

    $(document).on("mousemove", mousemove);
    $(document).on("mouseup", mouseup);
});