ドラッグ アンド ドロップ プロジェクトに取り組んでおり、サイズ変更可能な画像のクローンをドロップゾーンにドラッグする必要があります。ドロップしたら、クローンもサイズ変更およびドラッグ可能にしたいと考えています。クローンのクローンを作成したくありません...移動できるようにするだけです。私の目的は、イメージの各クローンをオリジナルから独立させることです。私の考えでは、オリジナルの ID を指定し、各クローンが削除されるたびに ID を変更します。私が調査したところ、一般的な推奨事項は、画像をタグでラップし、画像の「alsoResize」を使用してサイズを変更することであることに気付きました。私の問題は、クローンを作成してドロップすると、サイズを変更したりドラッグしたりできなくなることです。ここに私が取り組んでいるいくつかのコードがあります...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>draggable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<style>
#draggable {
width: 100px;
height: 100px;
background: #ccc; }
#drophere {
width:600px;
height:600px;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
// set global id counter
var gIDCnt = 0;
</script>
</head>
<body style="width: 1000px; height: 800px;">
<div id="draggable">Drag me</div>
<div id="img0" class="imgwrapper">
<img class= "image" src="koala.jpg" style="height: 100px;" alt="Koala Bear" />
</div>
<script>
$(function(){
$( "#draggable" ).resizable().draggable();
$(".imgwrapper").resizable({
aspectRatio: true,
handles: 's,e,se',
alsoResize: '.image'
}).draggable({
helper: "clone",
revert: "invalid",
appendTo: "body"
});
$("body").droppable({
accept: ".draggable, .imgwrapper, .onQuestion, .image",
drop: function (event, ui) {
var isOnQuestion = $(ui.draggable).hasClass("onQuestion");
if (isOnQuestion == true) {
// Have already dropped this once, don't use clone anymore
var element = $(ui.draggable);
} else {
var element = $(ui.draggable).clone();
};
// Set the absolute position of object
var offset = $(this).offset();
var pos = $(ui.helper).offset();
var x = pos.left - offset.left;
var y = pos.top - offset.top;
$(element).css({ "left": x, "top": y, "position": "absolute" });
if (isOnQuestion == false) {
//alert("Not on Question");
$(element).removeClass("imgwrapper");
//$(element).resizable("destroy");
//$(element).draggable("destroy");
gIDCnt= gIDCnt + 1;
var nextID = gIDCnt.toString();
var cNextID = "img"+nextID;
//alert(" ID: "+cNextID);
// Update with new ID
$(element).prop("id",cNextID);
var curid = $(element).attr("id");
$(element).addClass("onQuestion");
//alert("id: "+$(element).attr('id'));
$(element).children(".image").addClass("imageOn");
$(element).children(".image").removeClass("image");
//alert("id: "+$(element).attr('id'));
var cToResize = "#img"+nextID+" > .imageon";
//alert("cToResize: "+cToResize);
// Here's where I tried to make resizable
//$(element).resizable();
//$(element).resizable("option",{
// alsoResize: cToResize,
// aspectRatio: true,
// });
$('#'+cNextID).draggable();
$(element).css({border: "1px solid red"});
}
$("body").append(element);
}
});
});
</script>
</body>
</html>
複製された各イメージの「id」を更新し、新しい ID をサイズ変更のセレクターとして使用してサイズ変更を行います。ただし、新しいクローン オブジェクトのサイズ変更およびドラッグ可能な機能を破棄してから、サイズ変更などを試みると、. その後、何も機能しません。私のコードでは、いくつかのアラートがコメントアウトされていることに気付くでしょう。複製された各オブジェクトにクラス (onQuestion) を追加して、それが以前にドロップゾーンに置かれたことを検出できるようにして、再度複製しようとしないようにします。元のクラス (imgWrapper) を削除しますが、実行しようとすると...
$(element).resizable("destroy");
$(element).draggable("destroy");
以降のコードは実行されません。これでイベントハンドラーを使用して調査する必要があるかどうか疑問に思い始めています。
誰にも提案はありますか？
ありがとう、ケン