基于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程序设计有所帮助。

赞 (0)

相关推荐

  • js弹窗返回值详解(window.open方式)

    test.php 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

  • 简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器

    简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器

    简单漂亮的js弹窗 - 自由拖拽 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>简单漂亮的js弹窗 - 自由

  • js拖拽的原型声明和用法总结

    下面是自己写的一个关于js的拖拽的原型声明:代码如下 需要注意的问题包括: 1.this的指向到底是指向谁--弄清楚所指的对象 2.call()方法的使用 3.直接将父级原型赋给子级与使用for将其赋给子级有什么区别? 比如: for(var i in Drag.prototype) { LimitDrag.prototype[i]=Drag.prototype[i];----------子级发生改变,其父级并不会受到影响 } LimitDrag.prototype=Drag.prototype

  • javascript拖拽效果延伸学习

    本文总结一下,拖拽所延伸出来的一些效果,供大家参考,具体内容如下 1.实现拖拉图片时,带框的效果.即当鼠标拖动某一个图片或物体时,其原有位置扔保留其型. 这种效果,其实很简单,主要是另外创建一个物体,使其与被拖拽的物体,宽和高一样,然后,将其变为拖拽的对象. 直接上代码: <html <head> <style> #div1 {width:100px; height:100px; background:yellow; position:absolute;} .box{bord

  • JavaScript简单实现弹出拖拽窗口（二）

    JavaScript简单实现弹出拖拽窗口（二）

    接上文JavaScript简单实现弹出拖拽窗口(一)进行学习.  下面开始具体分析代码部分:  首先我们先确认下结构:  悬浮窗口:初始不可见.包括标题栏和内容栏,标题栏内有标题和关闭按钮.  遮罩层:初始不可见.用于设置弹出悬浮窗口时的半透明背景,  按钮:用于点击弹出悬浮窗口. 下面进行详细解释  1.要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute):    /*登录浮层组件*/ .popup{ display:none; /*初始隐藏*/ widt

  • 基于React.js实现原生js拖拽效果引发的思考

    基于React.js实现原生js拖拽效果引发的思考

    一.起因&思路 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值. 注意:这里主要是通过绝对定位的top和left来确定元素的位置

  • JavaScript实现相册弹窗功能（zepto.js)

    JavaScript实现相册弹窗功能（zepto.js)

    先看看弹窗效果,如下: //放大图片 $(page).on('click','.popupImage img',function () { var that = $(this); that.popupImage({ this:that, width:"200px" }) }); //相册弹窗 $.fn.popupImage = function (obj) { var $this = obj.this; var sj_w = $this[0].naturalHeight; var sr

  • 原生js实现自由拖拽弹窗代码demo

    原生js实现自由拖拽弹窗代码demo

    本文为大家分享了原生弹窗拖拽代码demo,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹窗拖拽</title> <style> *{margin:0;padding:0;} .box{position: absolute;width: 400

  • JavaScript简单实现弹出拖拽窗口（一）

    JavaScript简单实现弹出拖拽窗口（一）

    本文实例为大家分享JavaScript弹出拖拽窗口的具体实现代码,供大家参考,具体内容如下 需求说明:  1.点击页面按钮,弹出窗口:  2.要有半透明背景遮罩:  3.弹出窗口圆角,窗口半透明,但内容不透明:带阴影:  4.窗口可拖动:  5.拖动停止之后,滚动页面时窗口位置不动:  6.可以使用jQuery:  7.有关闭按钮:  进一步功能具体描述:  点按钮,会有一个可以拖拽的浮层出来.  有一个背景遮罩,支持标题栏的拖拽,在标题栏以外,在标题栏区域之外的区域拖拽是没有效果的,拖拽功能限

  • javascript拖拽应用实例

    javascript拖拽应用实例

    之前文章中也讲了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚动条,也可以理解为表单中的数量选择控件,也可以理解为进度条,等等,反正你可以改成很多你想要的效果,废话不多说,我们来看看这个是怎么做的吧! 想了想,感觉原理就不用说了吧,我在拖拽效果中就已经说的很清楚了,不清楚的同学可以出门左转,查看 javascript小实例,PC网页里的拖拽 ,我就直接贴代

随机推荐