JSFiddle - React, Tailwind, and code Playground

by domslee

HTML

<div id="dragEl" draggable='true'>1.5343</div>

JavaScript

//This is the element
dragItem = document.getElementById("dragEl");

//This is the event that changes it when mouse is over
dragItem.addEventListener("mouseover", HandleStart);

//These are events that change it back when the dragging is finished
dragItem.addEventListener("mouseout", HandleEnd);
dragItem.addEventListener("dragend", HandleEnd);
temp = dragItem.innerHTML;

//This is launched when it is hovered over
function HandleStart(e){
    e.preventDefault();
    text = e.target.innerHTML
    rounded = Math.round(Number(text)*10)/10; //Rounds the number to two decimal places
    e.target.innerHTML = rounded; 
}

//This is launched when dragging has finished
function HandleEnd(e) {
    e.preventDefault();
    e.target.innerHTML = temp; //Reverts to original
}