Make tree images draggable and resizable

Question

How do I integrate draggable, droppable and resizable into images that can be uploaded? I have 3 different upload images I can upload and I want to drag and resize. I have looked and tried but when I drag an image the same image appears as soon as I drag the image. How can it be fixed?

<script>
    // External added
    jQuery(download).ready(function () {
        jQuery(".file-upload-wrapper").hide();
        jQuery(".out-put-img1").hide();
        jQuery("#imajes").change(function () {
            var selected = jQuery('#imajes').val();
            if (selected == "new-upload") {
                jQuery(".file-upload-wrapper").show();
            } else {
                jQuery(".file-upload-wrapper").hide();
            }
        });

        //File
        function readURL(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    jQuery(".out-put-img1").show();
                    $('#output1').attr('src', e.target.result);
//                   / $('.append-img').append('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        jQuery("#upload-img1").change(function () {
            readURL(this);
   
 $('.dragbal').draggable();
 

        });
    });
</script>

<script>
    // External added
    jQuery(download).ready(function () {
        jQuery(".file-upload-wrapper").hide();
        jQuery(".out-put-img2").hide();
        jQuery("#imajes").change(function () {
            var selected = jQuery('#imajes').val();
            if (selected == "new-upload") {
                jQuery(".file-upload-wrapper").show();
            } else {
                jQuery(".file-upload-wrapper").hide();
            }
        });

        //File
        function readURL(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    jQuery(".out-put-img2").show();
                    $('#output2').attr('src', e.target.result);
//                   / $('.append-img').append('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        jQuery("#upload-img2").change(function () {
            readURL(this);
   
  $('.dragbal1').draggable();
 
  
  
        });
    });
</script>
<script>
    // External added
    jQuery(download).ready(function () {
        jQuery(".file-upload-wrapper").hide();
        jQuery(".out-put-img4").hide();
        jQuery("#imajes").change(function () {
            var selected = jQuery('#imajes').val();
            if (selected == "new-upload") {
                jQuery(".file-upload-wrapper").show();
            } else {
                jQuery(".file-upload-wrapper").hide();
            }
        });

        //File
        function readURL(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    jQuery(".out-put-img4").show();
                    $('#output4').attr('src', e.target.result);
//                   / $('.append-img').append('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        jQuery("#upload-img4").change(function () {
            readURL(this);
   
  $('.dragbal2').draggable();
  

        });
    });
</script>

<div class="dragbal">
<img id="output1" class="out-put-img1" style="position: absolute;top: 100px;right: 108px" height="80px" width="80px"></div>
<div class="dragbal1">
 <img id="output2" class="out-put-img2" style="position: absolute;top: 100px;right: 108px" height="80px" width="80px"></div>
 <div class="dragbal2">
 <img id="output4" class="out-put-img4" style="position: absolute;top: 100px;right: 108px" height="80px" width="80px"></div>