上传多个文件（使用ajax）后，拖放不起作用答案

【问题标题】：After uploading multiple files (using ajax) the drag and drop does not work上传多个文件（使用ajax）后，拖放不起作用
【发布时间】：2019-07-31 06:46:16
【问题描述】：

在上传新图片之前拖拽是有效的，应该是ajax的问题

我尝试更改顺序或将可拖动的内容放入 echo PHP 中，但它不起作用，网页是http://tarekeperu.000webhostapp.com/photobook.php 您必须上传图片，但在此之前，请在上传照片之前使用拖放查看它是否有效。

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

上传多张图片后拖放应该可以工作

【问题讨论】：

您需要在每张新上传的图片上注册事件监听器。也许最好的方法是在gallery 容器上注册任何拖放侦听器，并在上传后使用event delegation 将事件处理程序分配给图像。您目前在哪里/如何分配拖放功能？？
下面我输入了拖拽所在的位置，是不是一定要在ajax函数里面添加拖拽功能才成功？
查看页面上的代码源，您可以为相同的任务获得多个函数定义 - 只是具有不同的 ID 属性。我的猜测是这些是在检索记录集后由 php 在循环中生成的？我建议这不是最好的方法 - 在这种情况下，我猜新创建的函数（上传图像后）尚未写入文档，因此没有事件侦听器绑定到新图像。您最好在父容器上使用 event delegation - 然后查找将 linsteners 绑定到的图像

标签： javascript php jquery html ajax

【解决方案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>

【讨论】：