<!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> (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|