JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div id="draggable-wrap">
    
<img src="http://www.presentandcorrect.com/blog/wp-content/uploads/2012/11/tumblr_mcf11pk4nj1ru82ue.jpg" id="drag" class="martens object01" />
    
    
</div>

CSS

#draggable-wrap {
    width:100%;
    height:100%;
    position:relative;
}
#drag {
    cursor:move;
}
.martens {
}
.object01 {
    width: 300px;
    height: auto;
    top: 100px;
    left: 100px;
}
.object02 {
    width: 200px;
    height: auto;
    bottom: 100px;
    right: 100px;
}


#poop { width:400px; height:600px; display:none; background:black; }

JavaScript

var dragged = false;
$("#drag").draggable({
    stop: function (ev, ui) {
        dragged = true;
    }
});

$("img").click(function () {
    if (!dragged) alert('CLICK!');
    dragged = false;
});


$("#YourElementID").css({ display: "block" });