基于jquery插件实现拖拽删除图片功能.pdfVIP

这篇文章主要介绍了基于 jquery 插件实现拖拽删除图片功能的相关资料 ,需要的朋友可 以参考下 本文实例为大家分享了 jquery 插件实现拖拽删除图片功能的具体代码，供大家参考， 具体内容如下 实现以下效果 完全拖出这个层，图片会消失，否则图片会回到原来的位置 lt;htmlgt; lt;headgt; nbsp; lt;titlegt;lt;/titlegt; nbsp; lt;style type=text/cssgt; nbsp; nbsp; #mydiv{ width:900px; background-color:#444; border:1px solid red} nbsp; nbsp; #mydiv2{ width:900px;; border:1px solid red} nbsp; nbsp; img{ width:200px; height:200px;} nbsp; nbsp; ul{ list-style-type:none;} nbsp; nbsp; ul li{ display:inline;} nbsp; lt;/stylegt; nbsp; nbsp; lt;script src=js/Jquery1.7.js type=text/javascriptgt;lt;/scriptgt; lt;!-- nbsp;lt;script src=js/jquery-ui-1.8.18.custom.min.js type=text/javascriptgt;lt;/scriptgt;--gt; lt;!-- nbsp; 或 1.8 用以下四个 --gt; nbsp; lt;script src=js/jquery.ui.core.js type=text/javascriptgt;lt;/scriptgt; nbsp; lt;script src=js/jquery.ui.widget.js type=text/javascriptgt;lt;/scriptgt; nbsp; lt;script src=js/jquery.ui.mouse.js type=text/javascriptgt;lt;/scriptgt; nbsp; lt;script src=js/jquery.ui.draggable.js type=text/javascriptgt;lt;/scriptgt; nbsp; nbsp; lt;script type=text/javascriptgt; nbsp; nbsp; nbsp; $(function () { //存储的是被拖动的图片的初始坐标 nbsp; nbsp; nbsp; var startleft = 0; nbsp; nbsp; nbsp; var starttop = 0; nbsp; nbsp; nbsp; $(img).draggable({ nbsp; nbsp; nbsp; nbsp; start: function () { nbsp; nbsp; nbsp; nbsp; // 为两个变量设置被拖动图片的初始坐标 nbsp; nbsp; nbsp; nbsp; nbsp; startleft = $(this).offset().left; nbsp; nbsp; nbsp; nbsp; nbsp; starttop = $(this).offset().top; nbsp; nbsp; nbsp; nbsp; }, nbsp; nbsp; nbsp; nbsp; stop: function () { nbsp; nbsp; nbsp; nbsp; nbsp; if ($(this).offset().left gt; $(#mydiv).offset().left + $(#mydiv).width() || $(this).offset().t