基于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 相关文章推荐
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
Javascript实现单选框效果
Dec 09 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跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python获取糗百图片代码实例
2013/12/18 Python
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
Django实现自定义404,500页面教程
2017/03/26 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
快速创建python 虚拟环境
2020/11/28 Python
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
励志演讲稿800字
2014/08/21 职场文书
优秀教师事迹材料
2014/12/15 职场文书
廉政承诺书范文
2015/04/28 职场文书
担保贷款承诺书
2015/04/30 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
Golang中channel的原理解读(推荐)
2021/10/16 Golang