基于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 相关文章推荐
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
详解React中setState回调函数
Jun 14 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 Javascript
javascript实现点击产生随机图形
Jan 25 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
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
Jquery 实现图片轮换
2015/01/28 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
python中的对象拷贝示例 python引用传递
2014/01/23 Python
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
python定向爬取淘宝商品价格
2018/02/27 Python
python实现电子词典
2020/03/03 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
实习生的自我评价
2014/01/08 职场文书
小学课外阅读总结
2014/07/09 职场文书
收银员岗位职责
2015/02/03 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL