使树图像可拖动和可调整大小

Question

如何将可拖动，可放置和可调整大小集成到可上载的图像中？我有3个不同的上传图片我可以上传，我想拖动和调整大小。我已经看过并尝试了但是当我拖动图像时，只要我拖动图像就会出现相同的图像。怎么修好？

<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>