这里需要注意的是对几个js文件的引用顺序，因为是层层嵌套的关系，所以顺序不能乱；
这里主要是实现当把图片拖出相框时，图片消失（见下图的图示）。
<head> <title></title> <style type="text/css"> #mydiv{ width:900px; background-color:#444;left:100px;position:absolute;} img{ width:200px; height:200px;} ul{ list-style-type:none;} ul li{ display:inline;} </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; var b; $("img").draggable({ start:function(){ a = $(this).offset().left; b = $(this).offset().top; }, stop:function(){ var left=$(this).offset().left; var top = $(this).offset().top; if (left > $("#mydiv").width() + $('#mydiv').offset().left) { $(this).hide(1000); } else if (top > $("#mydiv").height() + $('#mydiv').offset().top) { $(this).hide(1000); } else { $(this).offset({left:a,top:b}); } } }); }); </script></head><body><div id="mydiv"><ul><li><img src="images/2.jpg" /></li><li><img src="images/3.jpg" /></li><li><img src="images/4.jpg" /></li><li><img src="images/5.jpg" /></li></ul></div></body></html>下面是页面加载时的效果图；
下面一张是当我拖拽图片过程中的截图，这个过程中图片不会消失，直到全部拖出，图片才会消失；
下面是最后的效果图；
转载于:https://www.cnblogs.com/qzc900809/archive/2013/05/09/3070097.html
