<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script src="tdtp_js/jquery.ui.core.js" type="text/javascript"></script>
<script src="tdtp_js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="tdtp_js/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="tdtp_js/jquery.ui.draggable.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#basketball").draggable({
stop: function () {
var left = $(this).offset().left;
var top = $(this).offset().top;
var width = $(this).width();
var height = $(this).height();
if (left > $("#basket").offset().left && top > $("#basket").offset().top) {
//alert("ee");
if (left < $("#basket").offset().left + $("#basket").width() && top < $("#basket").offset().top + $("#basket").height()) {
if (left + $(this).width() < $("#basket").offset().left + $("#basket").width() && top + $(this).height() < $("#basket").offset().top + $("#basket").height()) {
alert("进球了");
}
}
}
}
})
})
</script>
<style type="text/css">
#basketball{ position:absolute; left:400px; bottom:100px; width:50px; height:50px; background-color:#444;}
#basket{position:absolute; right:10px; top:100px; width:100px; height:100px; border:solid 1px #999;}
</style>
</head>
<body>
<div id="basketball">球</div>
<div id="basket">框</div>
</body>
</html>