JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://upload.wikimedia.org/wikipedia/commons/1/18/Blender-meta-ball.png"  width="50" height="50" id="ball2">
<div id="debug"></debug>

JavaScript

document.getElementById('ball2').onmousedown = function() {
    this.style.position = 'absolute'

    var self = this

    document.onmousemove = function(e) {
        e = e || event
        fixPageXY(e)

        self.style.left = e.pageX - 25 + 'px'
        self.style.top = e.pageY - 25 + 'px'
    }
    this.onmouseup = function() {
        document.onmousemove = null
    }
}

document.getElementById('ball2').ondragstart = function() {
    $("#debug").html("ondragstart");
    return false
}

function fixPageXY(e) {
    if (e.pageX == null && e.clientX != null) {
        var html = document.documentElement
        var body = document.body

        e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0)
        e.pageX -= html.clientLeft || 0

        e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0)
        e.pageY -= html.clientTop || 0
    }
}