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