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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
JS表的模拟方法
Feb 05 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
node.js环境搭建图文详解
Sep 19 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
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在线生成ico文件的代码
2007/10/09 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
php header Content-Type类型小结
2011/07/03 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
javascript图片滑动效果实现
2021/01/28 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
react-router 路由切换动画的实现示例
2018/12/03 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Python列表对象实现原理详解
2019/07/01 Python
python的slice notation的特殊用法详解
2019/12/27 Python
python3 logging日志封装实例
2020/04/08 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
三分钟演讲稿范文
2014/04/24 职场文书
银行催款通知书
2015/04/17 职场文书
高三英语教学反思
2016/03/03 职场文书