<!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>
<style type="text/css">
img
{
width:50px;
height:50px;
}
#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>
<script src="js/Jquery1.7.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var a = 0;
var b = 0;
var c = 0;
var d = 0;
$('img').draggable({
start: function () {
a = $(this).offset().top;
b = $(this).offset().bottom;
c = $(this).offset().left;
d = $(this).offset().right;
},
stop: function () {
if ($(this).offset().left > $('basketball').offset().left + 600 || ($(this).offset().bottom > $('basketball').offset().bottom + 300)) {
$(this).offset({
right:10,
top:100
})
}
else {
$(this).offset({
left:c,
bottom:b
})
}
})
})
</script>
</head>
<body>
<div id="basketball">
<ul>
<li>
<img src="images/35x35/2.jpg" /> </li></ul></div>
<div id="basket">框</div>
</body> </html>
原文链接：https://www.f2er.com/ajax/166409.html