これが私が使用しているコードです。リンクの下に画像を表示するタスクは実行できますが、ドラッグできません。このスクリプトは、ワンクリックで画像スパンを表示し、2回目のクリックで画像スパンを閉じるタスクを実行します。私が欲しいのは、ワンクリックでドラッグ可能にそれらを表示することです。
<script type="text/javascript">
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
var el = $(this);
var slidingDiv = el.find("span.slidingDiv");
$(".slidingDiv" ).draggable();
if (slidingDiv.length > 0) {
slidingDiv.slideToggle(function () { el.after(slidingDiv); });
}
else {
slidingDiv = el.next("span.slidingDiv");
el.append(slidingDiv);
slidingDiv.slideToggle();
}
return false;
});
$('.show_hide_close').click(function () {
$(this).parent().parent("a.show_hide").click();
return false;
});
});
$(function() {
$( ".slidingDiv" ).draggable();
});
</script>
HTML:
<p> <a href="#" class="show_hide" style="position: relative;">Japan</a><span class="slidingDiv"><img src="02-1 ImageFiles/01 Japan.JPG" style="width:235px; height:245px;" /><a href="#" class="show_hide_close">Close</a></span> is made up of islands,