使图像可拖动和可调整大小的JavaScript

Question

我有一个脚本，允许用户将3个不同的图像上传到div中，我需要的是允许用户在div内的任何地方拖动和调整图像大小我尝试自己做，但出于某种原因，当我拖动图像更多图像出现我如何解决这个问题？

<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();
$('#output1').resizable();
	

        });
    });
</script>

<script>
    // External added
    jQuery(download).ready(function () {
        jQuery(".file-upload-wrapper1").hide();
        jQuery(".out-put-img2").hide();
        jQuery("#imajes").change(function () {
            var selected = jQuery('#imajes').val();
            if (selected == "new-upload") {
                jQuery(".file-upload-wrapper1").show();
            } else {
                jQuery(".file-upload-wrapper1").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();
$('#output2').resizable();
		
		
        });
    });
</script>
<script>
    // External added
    jQuery(download).ready(function () {
        jQuery(".file-upload-wrapper2").hide();
        jQuery(".out-put-img4").hide();
        jQuery("#imajes").change(function () {
            var selected = jQuery('#imajes').val();
            if (selected == "new-upload") {
                jQuery(".file-upload-wrapper2").show();
            } else {
                jQuery(".file-upload-wrapper2").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();
$('#output4').resizable();
		

        });
    });
</script>

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