JSFiddle - React, Tailwind, and code Playground

by bingjie2680

HTML

<div id="test">
</div>

CSS

#test {
    width: 200px;
    height: 200px;
    background: red;
}

JavaScript

var div = document.getElementById("test");

div.addEventListener("mousedown", down);

function down () {
    console.log("mouse down");
    document.addEventListener("mousemove", move);
    document.addEventListener("mouseup", up);   
}

function move () {
    console.log("mouse move");
}

function up () {
    document.removeEventListener("mousemove", move);
    document.removeEventListener("mouseup", up); 
    console.log("mouse up");
}