本文實例為大家分享了jquery插件實現拖拽刪除圖片功能的具體代碼，供大家參考，具體內容如下
實現以下效果
完全拖出這個層，圖片會消失，否則圖片會回到原來的位置
<html><head> <title></title> <style type="text/css"> #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;} </style> <script src="js/Jquery1.7.js" type="text/javascript"></script><!-- <script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>--><!-- 或1.8用以下四個--> <script src="js/jquery.ui.core.js" type="text/javascript"></script> <script src="js/jquery.ui.widget.js" type="text/javascript"></script> <script src="js/jquery.ui.mouse.js" type="text/javascript"></script> <script src="js/jquery.ui.draggable.js" type="text/javascript"></script> <script 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 }) } } }) }) </script></head><body><div id="mydiv"><ul><li><img src="images/img01.jpg" /></li><li><img src="images/img02.jpg" /></li><li><img src="images/img03.jpg" /></li><li><img src="images/img04.jpg" /></li></ul></div></body></html>以上就是本文的全部內容，希望對大家學習jquery程序設計有所幫助。
新聞熱點
疑難解答
