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


Posted in Javascript onAugust 27, 2020

本文实例为大家分享了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程序设计有所帮助。

Javascript 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
自己的js工具 Event封装
Aug 21 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 Javascript
JavaScript String 对象常用方法详解
May 13 #Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 #Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 #Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 #Javascript
浅析JS操作DOM的一些常用方法
May 13 #Javascript
javascript判断图片是否加载完成的方法推荐
May 13 #Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 #Javascript
You might like
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
详解python中executemany和序列的使用方法
2017/08/12 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
Python 使用office365邮箱的示例
2020/10/29 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
企业消防安全制度
2014/02/02 职场文书
广告语设计及教案
2014/03/21 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
推销搭讪开场白
2015/05/28 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
详解nodejs内置模块
2021/05/06 NodeJs