jqueryで、後から追加した画像もドラッグ&ドロップできるようにした
jqueryで、後から追加した画像もドラッグ&ドロップできるようにしたい
以下のようにして、画像をドラッグ&ドロップできるようにしています
そこに、新たに画像をアップロードして、その画像もドラッグできるようにするところで詰まってしまいました
アップロードする時に画面遷移を起こしたくなかったので、インラインフレームを使っています
upload.phpでアップロードされた画像を取得して、divタグのクラス名を指定したりしてappendChildで親フレームに挿入
しかし、画像が表示されはするのですがドラッグしようとしても何も起こらない状態です
Firebugでも見てみると、元の画像は
<div class="dragArea ui-draggable"><img src="./img0.jpg" width="100" height="100"></div>
となっていますが、アップロードした画像(新規追加した要素)は、
<div id="adddragfile"><div class="dragArea"><img src="././tmp/newimg.jpg" width="100" height="100"></div></div>
となっていて、ドラッグ属性が付いていないように思えます
よろしくお願いします
/* include.php */
//ドラッグ可能な画像
<div class='dragArea'><img src='./img0.jpg' width='100' height='100'></div>
//ここにタグを追加していく
<div id='adddragfile'></div>
//ドロップ先となる画像
<div class='dropArea'><img src='./img1.jpg' width='300' height='300'></div>
<div class='dropArea'><img src='./img2.jpg' width='300' height='300'></div>
//ファイルのアップロード
<iframe title='upload_frame' name="upload_frame" style="display:none"></iframe>
<form action="./upload.php" method="post" enctype="multipart/form-data" target="upload_frame">
<input type="hidden" name="max_file_size" value="1000000">
<input type="file" name="upload_image">
<input type="submit" value="画像アップロード">
</form>
/* jqueryファイル */
$(function(){
$(".dragArea").draggable({
cursor:'move',
helper:'clone'
});
$(".dropArea").droppable({
drop:function(e,ui){
alert("ドロップされました");
}
});
});
/* upload.php */
<?php
$upload_dir = './tmp/';
$filename = $_FILES['upload_image']['name'];
move_uploaded_file($_FILES['upload_image']['tmp_name'], $upload_dir.$filename);
?>
<script type="text/javasscript">
//親フレームのオブジェクトを取得
var container = parent.document.getElementById('adddragfile');
//要素を作成していく
div = parent.document.createElement('div');
div.className = "dragArea";
image = parent.document.createElement('img');
image.src = './<?php print($upload_dir.$filename);?>';
image.width = "100";
image.height = "100";
container.appendChild(div);
div.appendChild(image);
</script>
