JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<img src="http://www.basenow.net/wp-content/print0.jpg" id="object01" class="drag" width="400px" height="auto" />



<!-- <img src="http://www.basenow.net/wp-content/teaching2.jpg" id="object02" class="drag" /> -->
<!-- <h1><b class="drag">Hi there</b></h1> -->

CSS

.drag {
    position:relative;
    cursor:move;
}

#object01 {
    top:200px;
    left:200px;
    z-index: 100;
    clear:both;
}

/* #object02 {
    bottom:20%;
    right:20%;
    width:100px;
    height:auto;
} */

JavaScript

var dragobject = {
    z: 0,
    x: 0,
    y: 0,
    offsetx: null,
    offsety: null,
    targetobj: null,
    dragapproved: 0,
    initialize: function () {
        document.onmousedown = this.drag
        document.onmouseup = function () {
            this.dragapproved = 0
        }
    },
    drag: function (e) {
        var evtobj = window.event ? window.event : e
        this.targetobj = window.event ? event.srcElement : e.target
        if (this.targetobj.className == "drag") {
            this.dragapproved = 1
            if (isNaN(parseInt(this.targetobj.style.left))) {
                this.targetobj.style.left = 0
            }
            if (isNaN(parseInt(this.targetobj.style.top))) {
                this.targetobj.style.top = 0
            }
            this.offsetx = parseInt(this.targetobj.style.left)
            this.offsety = parseInt(this.targetobj.style.top)
            this.x = evtobj.clientX
            this.y = evtobj.clientY
            if (evtobj.preventDefault) evtobj.preventDefault()
            document.onmousemove = dragobject.moveit
        }
    },
    moveit: function (e) {
        var evtobj = window.event ? window.event : e
        if (this.dragapproved == 1) {
            this.targetobj.style.left = this.offsetx + evtobj.clientX - this.x + "px"
            this.targetobj.style.top = this.offsety + evtobj.clientY - this.y + "px"
            return false
        }
    }
}

dragobject.initialize()