JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<img id="ball" src="http://javascript.info/files/tutorial/browser/events/ball.gif"/>
<div id="debug"></div>

CSS

#ball{
  position : absolute;
  padding : 0px;
  top:0px
}

JavaScript

var xp = 0,
    yp = 0;
var dragging = false;
$("#ball").on("mousedown", function(e) {
    dragging = true;
    $(document).on("mousemove", this, function(e) {
        if(dragging) {
            mouseX = e.pageX - 20;
            mouseY = e.pageY - 20;
            xp += (mouseX - xp) / 12;
            yp += (mouseY - yp) / 12;
            $("#debug").html(xp + ":" + yp);
            $("#ball").css({
                left: xp,
                top: yp
            });
        }
    });
    $(document).on("mouseup", function(e) {
        dragging = false;
        $(document).off("mousemove",this, function(e) {
            alert(e.pageX)
        });
    });
        
    // prevent text selection in IE
    document.onselectstart = function () { return false; };
    // prevent IE from trying to drag an image
    e.target.ondragstart = function() { return false; };
    return false;
});