基于jquery插件实现拖拽删除图片功能 - [技术教程]

导航首页 » 技术教程 » 基于jquery插件实现拖拽删除图片功能

全站头部文字我要出现在这里

基于jquery插件实现拖拽删除图片功能 922 2024-03-04

本文实例为大家分享了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="http://www.gimoo.net/t/1903/js/Jquery1.7.js" type="text/javascript"></script>
<  <script src="http://www.gimoo.net/t/1903/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>-->
<  或1.8用以下四个-->
  <script src="http://www.gimoo.net/t/1903/js/jquery.ui.core.js" type="text/javascript"></script>
  <script src="http://www.gimoo.net/t/1903/js/jquery.ui.widget.js" type="text/javascript"></script>
  <script src="http://www.gimoo.net/t/1903/js/jquery.ui.mouse.js" type="text/javascript"></script>
  <script src="http://www.gimoo.net/t/1903/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="http://www.gimoo.net/t/1903/images/img01.jpg" /></li>
<li><img src="http://www.gimoo.net/t/1903/images/img02.jpg" /></li>
<li><img src="http://www.gimoo.net/t/1903/images/img03.jpg" /></li>
<li><img src="http://www.gimoo.net/t/1903/images/img04.jpg" /></li>
</ul>
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。

jquery

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解！

文章分类