After uploading multiple files (using ajax) the drag and drop does not work

Question

The drag and drop works until uploading new images, it should be a problem of ajax

I try to change the order or put draggable in echo PHP and it doesn't work, the webpage is http://tarekeperu.000webhostapp.com/photobook.php you have to upload images but before that, use the drag and drop to see if it works before uploading photos.

<?php  
 //upload.php  
 $output = '';  
 if(is_array($_FILES))  
 {  
      foreach($_FILES['images']['name'] as $name => $value)  
      {  
           $file_name = explode(".", $_FILES['images']['name'][$name]);  
           $allowed_extension = array("jpg", "jpeg", "png", "gif","JPG");  
           if(in_array($file_name[1], $allowed_extension))  
           {  
                $new_name = rand() . '.'. $file_name[1];  
                $sourcePath = $_FILES["images"]["tmp_name"][$name];  
                $targetPath = "upload/".$new_name;  
                move_uploaded_file($sourcePath, $targetPath);  
           }  
      }  
      $images = glob("upload/*.*");  
      foreach($images as $image)  
      {  
           $output .= '<div class="col-md-1" align="center" ><img class="draggable" src="' . $image .'" width="100px" height="auto" style="margin-top:15px; padding:8px; border:1px solid #ccc;" /></div>';  
      }  
      echo $output;  
 }  
?>

 <div class="container">  
    <div id="gallery" style="overflow:scroll;height:500px;">  
        <?php  
            $images = glob("upload/*.*");  
            foreach($images as $image)  
            {  
                 echo '<div class="col-md-1" align="center" ><img class="draggable" src="' . $image .'" width="100px" height="auto" style="margin-top:15px; padding:8px; border:1px solid #ccc;" /></div>';   
            }  
        ?>  
    </div>  
    <br />  
    <br />  
</div>

<script>
 $(document).ready(function(){  
    $('#select_image').change(function(){ 
       $('#upload_form').submit();  
    });  
    $('#upload_form').on('submit', function(e){  
       e.preventDefault();  
       $.ajax({  
            url :"upload.php",  
            method:"POST",  
            data:new FormData(this),  
            contentType:false,  
            processData:false, 
            cache:false, 
            success:function(data){  
                $('#gallery').html(data);  
                $('#select_image').val('');    
            }  
       }) 
    });  
 });  
</script>

Drag and drop should work after uploading multiple images

Answer 1

$(function() {
 var el = $('#vanilla-demo');

 var vanilla = new Croppie(el[0], {
   viewport: {
     width: 507,
     height:443
   },
   boundary: {
     width: 507,
     height:443
   },
   showZoomer: true,
   enableOrientation: false
 });

 vanilla.bind({
   url: '',
   orientation: 4
 });

 $(".draggable").draggable({
   cursor: "grabbing",
   helper: "clone",
   opacity: 0.8,
   grid: [20, 20],
   zIndex: 1002,
   tolerance: 'fit'
 });

 $(".droppable").droppable({
   classes: {
     "ui-droppable-hover": "ui-state-hover"
   },
   drop: function(event, ui) {
     var newImage = ui.draggable;
     vanilla.bind({
       url: newImage.attr("src"),
       orientation: 4
     });
   }
 });
});
</script>