jQuery拖动图片删除示例


Posted in Javascript onMay 10, 2013
<head> 
<title></title> 
<style type="text/css"> 
#mydiv 
{ 
width: 900px; 
background-color: #444; 
position: absolute; 
left: 100px; 
} 
img 
{ 
width: 200px; 
height: 200px; 
} 
ul 
{ 
list-style-type: none; 
height: 200px; 
} 
ul li 
{ 
display: inline; 
} 
</style> 
<script src="js/Jquery1.7.js" type="text/javascript"></script> 
<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/img2.jpg" /></li> 
<li> 
<img src="images/img3.jpg" /></li> 
<li> 
<img src="images/img4.jpg" /></li> 
<li> 
<img src="images/img5.jpg" /></li> 
</ul> 
</div> 
</body>

效果图
jQuery拖动图片删除示例
jQuery拖动图片删除示例
Javascript 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
js调用刷新界面的几种方式
May 03 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
微信小程序实现留言功能
Oct 31 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
jquery 提交值不为空的元素示例代码
May 10 #Javascript
JQuery中SetTimeOut传参问题探讨
May 10 #Javascript
jQuery中读取json文件示例代码
May 10 #Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 #Javascript
javascript级联下拉列表实例代码(自写)
May 10 #Javascript
jquery ui对话框实例代码
May 10 #Javascript
javascrip关于继承的小例子
May 10 #Javascript
You might like
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python Django模板的使用方法(图文)
2013/11/04 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
销售文员岗位职责
2013/11/29 职场文书
土木工程专业个人求职信
2013/12/30 职场文书
经销商培训邀请函
2014/01/21 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
2014年党小组工作总结
2014/12/20 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
anaconda python3.8安装后降级
2021/06/11 Python