JSFiddle - React, Tailwind, and code Playground

HTML

<div id="containerDragable">
    <img id="img_messi" style="display: inline; position: absolute; z-index: 101; " src="http://www.elconfidencial.com/fotos/noticias_2011/2012090245messi_dentro.jpg" />
    
    <div id="text_example">hi!</div>
</div>

CSS

#containerDragable {
    width: 80vw; 
    height: 45vw;
    background-color: rgb(227, 227, 227);
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position:absolute;
}

#img_messi
{
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;   
    -webkit-transform: scale(0.5);
    position:absolute;
}
#text_example
{
    font: normal 36px arial,sans-serif;
    position:absolute;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;   
    -webkit-transform: scale(0.5);
}

JavaScript

$(function () {
        $('#img_messi').draggable({
            containment: "#containerDragable", cursor: "move", scroll: false
            
        });
    });

$(function () {
        $('#text_example').draggable({
            containment: "#containerDragable", cursor: "move", scroll: false
            
        });
    });