图片拖出相框，自动消失
这里需要注意的是对几个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>
下面是页面加载时的效果图；
下面一张是当我拖拽图片过程中的截图，这个过程中图片不会消失，直到全部拖出，图片才会消失；
下面是最后的效果图；
