我设计了一个小网页http://www.mapisms.seas.gwu.edu/2.php。我使用jQuery来显示链接下方的span标记。但我无法将图像移动到另一个地方。但我希望能够移动图像。这是我使用的代码。
<style type="text/css">
.slidingDiv
{
cursor:move;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<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");
if (slidingDiv.length > 0) {
slidingDiv.slideToggle(function () { el.after(slidingDiv); });
$(".slidingDiv").draggable();
}
else {
slidingDiv = el.next("span.slidingDiv");
el.append(slidingDiv);
slidingDiv.slideToggle();
$(".slidingDiv").draggable();
}
return false;
});
$('.show_hide_close').click(function () {
$(this).parent().parent("a.show_hide").click();
return false;
});
});
</script>
here the span tag part.
<a href="#" class="show_hide" style="position: relative;">Japan</a>
<span class="slidingDiv" style="position: absolute; left: 0;">
<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, regions, prefectures (government districts), cities, and surrounding communities. The main island, Honshu, has thirty-four prefectures making up five regions. The
<a class="show_hide" href="#" style="position: relative;">Tōhoku Region</a>
<span class="slidingDiv" style="position: absolute; left: 0;">
<img src="02-1 ImageFiles/02 TohokuRegion.JPG" style="width:217px; height:236px;" />
<a href="#" class="show_hide_close">Close</a>
</span>