jQuery拖动图片删除示例_jquery

来源：动视网责编：小采时间：2020-11-27 21:09:27

jQuery拖动图片删除示例_jquery

jQuery拖动图片删除示例_jquery: 代码如下: #mydiv { width: 900px; background-color: #444; position: absolute; left: 100px; } img { width: 200px; height: 200px; } ul { list-style-type: none; height: 200px; } ul l

推荐度：

点击下载本文 文档为doc格式

导读jQuery拖动图片删除示例_jquery: 代码如下: #mydiv { width: 900px; background-color: #444; position: absolute; left: 100px; } img { width: 200px; height: 200px; } ul { list-style-type: none; height: 200px; } ul l

代码如下:

$(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
})
}
}
});
})