How to make all the image elements moviable / draggable using js

Issue

I am making a collage app and I put some effects. When you click on the choose file it creates image files and puts in the images. You can add borders and do a background color/ image. But I want to make those images moveable. Can you Please help me?

Here is the code:

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).attr("classname", "img").attr("draggable", "true").appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

function border() {
    var color = document.getElementById('bordertext').value;
  document.getElementById("gallery").style.border = color;
}
function backgroundclr() {
    var black = document.getElementById('colortxt').value
  document.getElementById('gallery').style.backgroundColor = black ;
}
function previewFile(fileInput) {
  var file = fileInput.files[0];
  var reader = new FileReader();

  reader.addEventListener("load", function() {
    setBackground(reader.result);
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
function setBackground(imageURL){
    document.getElementById('gallery').style.backgroundImage = "url(" + imageURL + ")";
    document.getElementById('gallery').style.backgroundSize = "100% auto";
    document.getElementById('gallery').style.backgroundRepeat = "no-repeat";
    document.getElementById('gallery').style.backgroundPosition = "center top";
}

img{
            min-width: 15px;
            max-width:400px;
        
  
  cursor: move;
 
}
        }

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<input type="file" multiple id="gallery-photo-add">
<div class="gallery" id="gallery" ></div>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
         border 
  </button><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
    Background Image
  </button>
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Border</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Please choose the pixel, type of border, color
          <br>
          <i>Example:<br>7px solid blue</i>
          <input type="text" id="bordertext">
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          <button type="btn" class="btn-primary"  data-dismiss="modal" onclick="border()">Set border</button>
        </div>
        
      </div>
    </div>
  </div>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
    Background Color
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal1">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
         Please choose the background color.
         <input type="text" id="colortxt">
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          <button type="btn" class="btn-primary"  data-dismiss="modal" onclick="backgroundclr()">Set border</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>
<div class="container">
  
  <!-- Button to Open the Modal -->
  <br>
  

  <!-- The Modal -->
  <div class="modal" id="myModal2">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Background Image</h4>
          
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Upload your background image.
          <input type="file" onchange="previewFile(this);">
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

Please help me. Hopefully, you like it and we could get a solution.

Solution

Using jQuery UI draggable() function solves the problem.

Answered By - Aswin