Drag, resize and rotate with mouse

I need to be able to resize, rotate, and move an image. I have managed to find the code below that works but I need to either have a rotation point on the image where I can use it to rotate it with mouse or have the slider to move with the image. The problem starts when the image and the slider are too far apart. I would prefer to have the slider as part of the image if possible, somehow connected. Many thanks in advance for your help. The image is a protractor where it needs to be moved and rotated to measure angles.

This is my code:

HTML

    <!-- Mockup img downloaded from www.magicmockups.com -->
    <!-- Change the mockup image to any image of your choice in the img tag bellow. -->
    <!-- XXX: WARNING: When the pen is saved, the movable div is RESET to the original 
    position/size/rotation. -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    </div>
    <div style="margin-top: 20px">ROTATION SLIDER:</div>
    <div id="slider" style="display:inline-block; width: 50%; margin: 10px 0 10px1 0px;"> 
    </div>
    <div style="display: inline-block; position: relative;">
    <!-- CHANGE IMG TO YOUR IMG -->
    <div id="movable" >https://link to image</div> 

Javascript

var currentUnit = "pixels"
$( function() {
    $("input[type=radio]").checkboxradio();
    $("#slider").slider({
        min: -360,
        max: 360,
        slide: function(event, ui) {
            // Set the slider's correct value for "value".
            $(this).slider('value', ui.value);
            $("#movable").css('transform', 'rotate(' + ui.value + 'deg)')
            updateText()
        }
    });

    $("#movable").draggable({
        drag: function(event, ui) {
            updateText()
        }
    })

   $("#movable").resizable({
        resize: function(event, ui) {
        updateText()
   }
})

// Init the text.
updateText();
});

function getPixelDimensions() {
    precision = 100

    // Save current transform (rotation).
    originalTransform = $("#movable").css('transform')
    // Remove rotation to make sure position() is the CSS position, not the bounding rect 
    position.
    $("#movable").css('transform', 'rotate(0deg)')
    position = $("#movable").position()
    // Restore rotation.
    $("#movable").css('transform', originalTransform)

    dim = {
    top: Math.round(position.top * precision) / precision,
    left: Math.round(position.left * precision) / precision,
    width: Math.round($("#movable")[0].clientWidth * precision) / precision,
    height: Math.round($("#movable")[0].clientHeight * precision) / precision
    }

    return dim;
    }

    function getPercentageDimensions() {

    }

    function updateText() {
        if (currentUnit == "pixels") {
            dim = getPixelDimensions();
            suffix = "px"
        } else {
            dim = getPercentageDimensions();
            suffix = "%"
        }

        $(".d").remove()

        for (prop in dim) {
            $("#dimensions").append( "<div class='d'>" + prop + ": " + dim[prop] + suffix + "</div>");
        }

        $("#dimensions").append( "<div class='d'>rotate: " + $("#slider").slider("value") + "deg</div>");

        // console.log($("#outer").position().top)
    }

    $('input').change(function() {
        if (this.id == "radio-1") {
            currentUnit = "pixels";
            updateText();
        } else if(this.id.search("radio") != -1) { 
            currentUnit = "percentage";
            updateText();
        }
    })

    function previewFile() {
        var preview = document.querySelector('img'); //selects the query named img
        var file    = document.querySelector('input[type=file]').files[0]; //sames as here
        var reader  = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file); //reads the data as a URL
        } else {
            preview.src = "";
        }
    }

CSS

    #movable {
    position: absolute; 
    text-align: center;


    /*Manually change values here.*/
    width: 400px; 
    height: 400px;
    top: 0px; 
    left: 0px;
    transform: rotate(0deg);
    }