html5图片拖拽删除,基于jquery插件实现拖拽删除图片功能

本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码，供大家参考，具体内容如下

实现以下效果

完全拖出这个层，图片会消失，否则图片会回到原来的位置

#mydiv{ width:900px; background-color:#444; border:1px solid red}

#mydiv2{ width:900px;; border:1px solid red}

img{ width:200px; height:200px;}

ul{ list-style-type:none;}

ul li{ display:inline;}

$(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

})

}

}

})

})

• 
• 
• 
• 

以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。