如何制作可移动的跨度标签?

时间:2012-10-30 02:41:36

标签: jquery html

我设计了一个小网页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>

0 个答案:

没有答案