以前の質問から、ドロップされた後に画像を正常に複製する素晴らしい解決策があります。
コードは次のとおりです。
$(function() {
var makeDraggable = function(element) {
element.draggable({
revert: "invalid",
appendTo: "#droppable",
helper: "clone"
});
}
$( "#droppable" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var newClone = $(ui.helper).clone();
makeDraggable(newClone);
$(this).after(newClone);
}
});
// Initalise the program by making first draggable:
makeDraggable($(".draggable img"));
しかし、問題は、ターゲット領域で一度に 1 つの画像だけを表示したいことです。しかし、現在、ドロップされたすべての画像が表示されています。
より具体的には、ユーザーがターゲット領域に画像をドロップし、後で別の画像をドラッグすると、前の画像がドロップまたはターゲット領域から削除され、新しい画像のみがターゲット領域に表示されます。このデモを参照してください: jsFiddle の例
これを解決するにはどうすればよいですか?