JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div class="svgcontainer draggable" style="width:300px; height:220px;">
    <svg transform="translate(0,0)" viewBox="0 0 800 800">
        <defs>
            <rect id="rectangle" width="800" height="586" />
            <pattern id="texture" patternUnits="userSpaceOnUse" x="0" y="0" width="800" height="800">
                <image xlink:href="http://texturezine.com/wp-content/uploads/2009/10/Spray-Wall-Texture-01.jpg" x="0" y="0" width="1600" height="800" transform="translate(-200,0)" />
            </pattern>
        </defs>
        <use xlink:href="#rectangle" fill="url(#texture)" />
    </svg>
</div>

CSS

.svgcontainer {
    position: absolute;
    border:2px solid red;
}

JavaScript

$(".draggable").draggable({
    //helper: 'clone',
    cursor: 'move',
    opacity: 0.7,
    stop: function (event, ui) {
        var top = ui.position.top;
        var left = ui.position.left;
        $(this).css('top', top);
        $(this).css('left', left);
    }
});