jQuery拖动图片删除示例_jquery

复制代码如下代码：

<标题>

#mydiv
{
宽度：900px；
背景颜色：#444；
位置：绝对；
左：100px；
}
img
{
宽度：200px；
高度：200px；
}
ul
{
列表样式类型：无；
高度：200px；
}
ul li
{
显示：内联；
}

<脚本 src="js/Jquery1.7.js" type="text/javascript">
<脚本 src="js/jquery.ui.core.js" type="text/javascript">
<脚本 src="js/jquery.ui.widget.js" type="text/javascript">
<脚本 src="js/jquery.ui.mouse.js" type="text/javascript">
<脚本 src="js/jquery.ui.draggable.js" type="text/javascript">

$(function () {
//存储是被拖动的图片的灵魂坐标
var startleft = 0;
var starttop = 0;
$('img') .draggable({
start: function () {
//为两个控件设置被拖动图片的灵魂坐标
startleft = $(this).offset().left;
starttop = $(this).offset().top;
},
stop: function () {
if ($(this).offset().left > $('#mydiv') .offset().left $('#mydiv').width() || $(this).offset().top > $('#mydiv').offset().top $('#mydiv' ).height()) {
$(this).remove()}
else {
//重置
$(this).offset({
left: startleft,
top: starttop
})
}
}
})
;

<身体>

;

• 
  


• 
  


• 
  


• 
  

效果图