当我从文件夹上传图像文件时,我无法使它们可拖动

Here is my main html file;

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

Here is 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();
      }          
    });
 }));
});

and here is the PHP file;

<?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);
    }
}
?>

When I load the images in static HTML (commented out) it works fine. When I run the code above it loads the first image in the directory but it's not draggable or resizable. When I take the class ID's out of the echo part of the PHP file. It loads the images OK but of course they are not draggable or resizable. Can anyone help. Many thanks. Neil.

douxi2670
douxi2670 第一行:$(init);一旦页面加载就调用init()作为回调。这也可以写成:$(document).ready(init);所以是的,他的代码调用了init()。
大约 4 年之前 回复
dongying195959
dongying195959 你有没有调用函数init()?
大约 4 年之前 回复
drxm72811
drxm72811 不知道,但您可以检查页面并检查生成的代码以查找任何差异。
大约 4 年之前 回复

1个回答



由于您在上传图像后动态添加内容,因此需要调用 .draggable()</ code >关于新元素。</ p>

一旦你的AJAX完成,我建议你这样做:</ p>

  $。ajax({
url: “http://localhost/phpexamples/show_images.php”,
类型:“POST”,
data:new FormData(this),
contentType:false,
cache:false,
processData:false,

beforeSend:function(){
$(“#err”)。fadeOut();
},
success:function(data){
if(data =='invalid file'){
//文件格式无效。
$(“#err”)。html(“文件无效!”)。fadeIn();
} else {
//查看上传文件。
$(“#preview” ).html(data).fadeIn();
$(“#form”)[0] .reset();
$(“#preview”)。find(“。dragMe”)。draggable();

}
},
错误:function(e){
$(“#err”)。html(e).fadeIn();
}
});
</ code> < / pre>
</ div>

展开原文

原文

Since you are adding content dynamically after the image has been uploaded, you will need to call .draggable() on the new elements.

I would advise doing this once your AJAX completes:

$.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();
  }          
});

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐