基于框架插件实现拖拽删除图片功能

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

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

html标题标题/标题样式类型=' text/CSS ' # mydiv { width :900 px；背景色： # 444;border:1px纯红} # my div 2 { width :900 px；border:1px纯红} img { width:200px高度：200 px} ul { list-style-type : no；} ul Li { display : inline }/style script src=' http : js/Jquery 1。7 .js ' type=' text/JavaScript '/script！-script src=' http : js/jquery-ui-1。8 .18 .定制。量滴js ' type=' text/JavaScript '/script-！-或1.8用以下四个-script src=' http : js/jquery。ui。核心。js ' type=' text/JavaScript '/script script src=' http : js/jquery。ui。小部件。js ' type=' text/JavaScript '/script script src=' http : js/jquery。ui。老鼠。js ' type=' text/JavaScript '/script script src=' http 3360 js/jquery .存储的是被拖动的图片的初始坐标var起始左=0；var starttop=0；$('img ').可拖动({ start: function () { //为两个变量设置被拖动图片的初始坐标startleft=$(this).偏移量()。向左；starttop=$(this).偏移量()。顶部；}，stop:函数(){ if($(this)} .偏移量()。左$('#mydiv ').偏移量()。左$('#mydiv ').width() || $(this).偏移量()。top $('#mydiv ').偏移量()。top $('#mydiv ').高度()){ $(这个).移除();} else { //复位$(这个)。offset({ left: startleft，top : start top })} })})))/script/head dydiv id=' mydiv ' ulli img src=' http : images/img 01。jpg '/Lili img src=' http : images/img 02。jpg '/Lili img src=' http : images/img 03。jpg '/Lili img src=' http : images/img 00以上就是本文的全部内容，希望对大家学习框架程序设计有所帮助。