当我从文件夹上传图像文件时，我不能使它们可拖动 - When I upload image files from a folders I cannot make them draggable

这是我的主html文件;

<!DOCTYPE html>
<html lang="en">
<head>
<title>Create Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<link rel = "stylesheet"
    type = "text/css"
    href = "jquery-ui-1.11.4.custom/jquery-ui.css " />
<style type = "text/css">
    .dragMe {
    width: auto;
    height: auto;
    /* border: 1px solid blue; */
    text-align: center;
    background-color: white;
    position: absolute;
    display:inline-block;
    z-index: 100;
    }
    .dragMeImage {
    width: 180px;
    height: 55px;
    border: 1px solid blue;
    text-align: center;
    background-color: white;
    position: absolute;
    z-index: 100;
    }
    #target {
    width: 400px;
    height: 600px;
    border: 1px solid red;
    text-align: center;
    position: absolute;
    left: 400px;
    top: 100px;
    z-index: 0;
    }
</style>
<script type = "text/javascript"
    src = "jquery-1.12.4.min.js">
</script>
<script type = "text/javascript"
    src = "jquery-ui-1.11.4.custom/jquery-ui.min.js">
</script>
<script type = "text/javascript" src="ajaxshow.js">
</script>
<script type = "text/javascript">
$(init);
function init(){
    //make all drag me elements draggable
    $(".dragMe").draggable();
    $(".dragMeImage").resizable({
    //aspectRatio: 3.2
    });
    //set target as droppable
    $("#target").droppable();
      //bind events to target
    $("#target").bind("drop", changeTarget);
    $("#target").bind("dropout", resetTarget);
} // end init
function changeTarget(event, ui){
    $("#target").addClass("ui-state-highlight")
    .html("Dropped ")
    .append(ui.draggable.text());
} // end changeTarget
function resetTarget(event, ui){
    $("#target").removeClass("ui-state-highlight")
    .html("Drop on me");
} // end reset
</script>   
</head>
<body id="page2">
<form id=form enctype="multipart/form-data" method="post"         action="show_images.php">
    <input type="submit" value="Continue"/>
</form>
<div id="preview"></div>
<div id="err"></div>
<!-- <h2>Create an Invitation Template to be Sent to the List Owners</h2>
<div class = "dragMe">
<img class = "dragMeImage" src="garbo.png" alt="Garbo Logo"     style="width:180px;height:120px;">
</div>
<div class = "dragMe">
<img class = "dragMeImage" src="CA.png" alt="Garbo Logo"  style="width:180px;height:55px;">
</div>
<div class = "dragMe">
<img class = "dragMeImage" src="CA1.png" alt="Garbo Logo"  style="width:180px;height:55px;">
</div>
<div id = "target">
Drop on this template
</div> -->
</body>
</html>

这里是ajaxshow.js;

$(document).ready(function (e) {
 $("#form").on('submit',(function(e) {
  e.preventDefault();
 $.ajax({
     url: "http://localhost/phpexamples/show_images.php",
   type: "POST",
   data:  new FormData(this),
   contentType: false,
         cache: false,
   processData:false,
   beforeSend : function()
   {
    //$("#preview").fadeOut();
    $("#err").fadeOut();
   },
   success: function(data)
      {
    if(data=='invalid file')
    {
     // invalid file format.
     $("#err").html("Invalid File !").fadeIn();
    }
    else
    {
     // view uploaded file.
     $("#preview").html(data).fadeIn();
     $("#form")[0].reset(); 
    }
      },
     error: function(e) 
      {
    $("#err").html(e).fadeIn();
      }          
    });
 }));
});

这是PHP文件;

<?php
$folder = "uploads/";
if(is_dir($folder)){
    if($handle = opendir($folder)){
        while(($file=readdir($handle)) != false){
            if($file==='.' || $file==='..') continue;
            list($width, $height) = getimagesize("uploads/$file");
                $h=150/$width*$height;
                $aspect = $height / $width; 
                    if ($aspect >= 1) $mode = "vertical"; 
                    else $mode = "horizontal";  
                echo  '<div class = "dragMe">';
                echo  '<img  class = "dragMeImage" src="uploads/'.$file.'" width="150" height="$h" alt="">';
                echo  '</div>';
        }
        closedir($handle);
    }
}
?>

当我在静态HTML中加载图像(注释掉)它工作得很好。当我运行上面的代码时，它会加载目录中的第一张图像，但它不能拖动或调整大小。当我将类ID从PHP文件的echo部分取出时。它可以加载图像，但当然它们不能拖拽或调整大小。有人能帮忙吗?多谢。尼尔。

由于您是在图像上传后动态添加内容，因此您需要在新元素上调用.draggable()。

我建议在AJAX完成后这样做:

$.ajax({
  url: "http://localhost/phpexamples/show_images.php",
  type: "POST",
  data:  new FormData(this),
  contentType: false,
  cache: false,
  processData:false,
  beforeSend : function() {
    $("#err").fadeOut();
  },
  success: function(data) {
    if(data=='invalid file') {
      // invalid file format.
      $("#err").html("Invalid File !").fadeIn();
    } else {
      // view uploaded file.
      $("#preview").html(data).fadeIn();
      $("#form")[0].reset();
      $("#preview").find(".dragMe").draggable();
    }
  },
  error: function(e) {
    $("#err").html(e).fadeIn();
  }          
});