1

我在互联网上看到了一个教程，并制作了下面的代码，它工作正常......

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>untitled</title>
<style type="text/css">
img{ cursor: pointer; }
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
function itemInSpot(drag_item,spot)
{
    var oldSpotItem = $(spot).find('img');

    var item = $('<img />');
    item.attr('src',drag_item.attr('src')).attr('class',drag_item.attr('class')).appendTo(spot).draggable({ revert: 'invalid' });
    drag_item.remove(); // remove the old object
}

$(document).ready(function() {
    $(".male,.middle,.female").draggable({ revert: 'invalid'});
    $('#allimages').droppable();
    $("#male").droppable({ accept: '.male'})
    $('#female').droppable({ accept: '.female'});
    $('#middle').droppable({ accept: '.middle'});
    $('#male,#female,#middle,#allimages').bind('drop', function(ev,ui) { itemInSpot(ui.draggable,this); });
});
</script>
</head>
<body>


<div id="male" style="width:150px; padding:10px; height:150px; margin:10px; border:1px solid black; float:left;" class="ui-droppable"></div>
<div id="middle" style="width:150px; padding:10px; height:150px; margin:10px; border:1px solid black; float:left;" class="ui-droppable"></div>
<div id="female" style="width:150px; height:150px; padding:10px; margin:10px; border:1px solid black; float:left;" class="ui-droppable"></div>

<div id="allimages" style="width:300px; height:80px; margin:10px; padding:15px; border:1px solid black; display:block; clear:both;" class="ui-droppable">
<img src="images/baby.png" class="male ui-draggable" alt="i don't know" style="position: relative; ">
<img src="images/marvin.gif" class="male ui-draggable" alt="i ama male" style="position: relative; ">
<img src="images/baby.png" class="middle ui-draggable" alt="i don't know" style="position: relative; ">
<img src="images/marvin.gif" class="male ui-draggable" alt="i am a male" style="position: relative; ">
<img src="images/girl.jpg" class="female ui-draggable" alt="i am a female" style="position: relative; ">

但是当我用图像映射更改可拖动的 div 时，它不起作用......

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>untitled</title>
<style type="text/css">
img{ cursor: pointer; }
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
function itemInSpot(drag_item,spot)
{
    var oldSpotItem = $(spot).find('img');

    var item = $('<img />');
    item.attr('src',drag_item.attr('src')).attr('class',drag_item.attr('class')).appendTo(spot).draggable({ revert: 'invalid' });
    drag_item.remove(); // remove the old object
}

$(document).ready(function() {
    $(".male,.middle,.female").draggable({ revert: 'invalid'});
    $('#allimages').droppable();
    $("#male").droppable({ accept: '.male'})
    $('#female').droppable({ accept: '.female'});
    $('#middle').droppable({ accept: '.middle'});
    $('#male,#female,#middle,#allimages').bind('drop', function(ev,ui) { itemInSpot(ui.draggable,this); });
});
</script>
</head>
<body>


<img src="images/main_bg.gif" usemap="#gender" />

<map name="gender">
<area id="female" coords="320,20,290,10,250,4,200,4,160,12,120,27,80,50,56,70,45,83,40,90,27,108,14,135,4,170,2,195,3,225,15,270,33,302,53,325,73,345,93,358,113,370,128,377,148,384,148,384,178,393,208,396,238,397,258,395,288,390,308,385,338,373,347,367,317,347,300,332,280,312,266,292,256,272,248,252,243,230,242,230,240,210,241,185,244,165,249,145,257,125,272,101,282,87,290,79,307,62,316,54,328,44,336,39,347,33" shape="poly" class="ui-droppable">
<area id="middle"   coords="363,43,372,49,396,68,411,84,428,108,435,120,443,138,450,158,454,178,455,195,454,218,452,232,444,260,430,289,417,306,399,327,384,340,365,354,348,365,318,346,301,330,281,311,267,291,257,271,249,251,244,229,244,229,241,211,242,186,245,166,250,146,258,126,273,102,283,88,291,80,308,63,317,55,329,45,337,40,348,34" shape="poly" class="ui-droppable">
<area id="male"  coords="349,32,364,42,373,48,397,68,412,84,429,108,436,120,444,138,451,157,455,178,456,195,455,218,453,232,445,260,431,289,418,306,400,327,384,341,366,355,349,367,370,378,390,384,420,392,445,396,459,397,475,397,495,396,519,392,532,389,532,389,550,384,572,375,590,368,623,347,646,327,672,293,683,270,689,254,693,246,698,195,695,172,691,154,685,132,670,106,661,92,643,70,624,53,593,32,570,22,541,12,511,5,473,3,446,5,428,8,397,14" shape="poly" class="ui-droppable">
</map>

<div id="allimages" style="width:300px; height:80px; margin:10px; padding:15px; border:1px solid black; display:block; clear:both;" class="ui-droppable">
    <img src="images/baby.png" class="male ui-draggable" alt="i don't know" style="position: relative; ">
    <img src="images/marvin.gif" class="male ui-draggable" alt="i ama male" style="position: relative; ">
    <img src="images/baby.png" class="middle ui-draggable" alt="i don't know" style="position: relative; ">
    <img src="images/marvin.gif" class="male ui-draggable" alt="i am a male" style="position: relative; ">
    <img src="images/girl.jpg" class="female ui-draggable" alt="i am a female" style="position: relative; ">
</div>

</body></html>

谁能帮我解决这个问题？？？

4

0 回答 0