基于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 相关文章推荐
Javascript核心读书有感之词法结构
Feb 01 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
node+express制作爬虫教程
Nov 11 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
js JSON.stringify()基础详解
Jun 19 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
PR值查询 | PageRank 查询
2006/12/20 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Flask之flask-session的具体使用
2018/07/26 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
班主任经验交流会主持词
2014/04/01 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
浅谈Redis中的RDB快照
2021/06/29 Redis
java设计模式--七大原则详解
2021/07/21 Java/Android