基於jquery外掛程式實現拖拽刪除圖片功能_jquery

本文執行個體為大家分享了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程式設計有所協助。