[jQuery] drag and drop doesn'n work well

[jQuery] drag and drop doesn'n work well


I would like to show with the alertbox "Droped!" when I dropping
".player" in ".fishing". However that doesn't work except .droppable-
activ and .droppable-hover.
Why alert("Dropped") doesn't work ?
<html>
    <header>
        <title>map</title>
        <style type="text/css">
        #map
        {
            position: absolute;
            z-index:-1;
            left: 50px;
            right: 50px;
            width: 600px;
        }
        .player
        {
            position: relative;
            z-index: -1;
            left: 50px;
            right: 50px;
            top: 350px;
        }
        #stat
        {
            top: 500px;
        }
        .fishing
        {
            z-index: 1;
            width: 250px;
            height: 160px;
            left: 400px;
            top: 300;
            background: #d1feff;
            opacity: 0.7;
        }
        #test
        {
            z-index: 10;
            left: 50px;
            right: 50px;
            width: 200px;
            height: 200px;
            background: green;
        }
        .droe ppable-activ{
            opacity: 1.0;
        }
        .droppable-hover {
            outline: 2px dotted black;
        }
        </style>
        <script src="./js/jquery.js"></script>
        <script src="./js/ui.jquery.js"></script>
        <script src="./js/easydrag.js"></script>
        <script>
            $(document).ready(function(){
                $("#test").draggable();
                $("#map").click(function(e) {
                    /*$("#player").css("left", e.pageX);
                    $("#player").css("right", e.pageX);
                    $("#player").css("top", e.pageY);
                    $("#player").css("bottom", e.pageY);
                    $("#stat").html(e.pageX+", "+e.pageY);*/
                    //alert(e.pageX +"x"+ e.pageY);
                });
                $(".fishing").droppable({
                    accept: "#test",
                    activeClass: "droppable-active",
                    hoverClass: "droppable-hover",
                    drop: function(event, ui) {
                        alert("Dropped!");
                    }
                });
            });
        </script>
    </header>
<body>
        <div id="test"></div>
        <img id="map" style="border: 3px solid black" src="map.png" />
        <img class="player" src="player.jpg" />
        <div class="fishing"></div>
        <div id="stat">dsds</div>
</body>
</html>