jQuery实现拖动效果的实例代码


Posted in jQuery onJune 25, 2017

jQuery实现拖动效果的实例代码,具体代码如下所示:

<!DOCTYPE html>
 <html>
<head>
<style>
 div{ width:100px; height:100px; background:red; position:absolute;}
 </style>
 <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
 <script>
 $(function(){
var disX = 0;
var disY = 0;
$('div').mousedown(function(ev){
disX = ev.pageX - $(this).offset().left;//获取鼠标到元素的left,top位置
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){
$('div').css('left',ev.pageX - disX);//获取移动后鼠标的位置,并重新赋值给元素
$('div').css('top',ev.pageY - disY);
});
$(document).mouseup(function(){
$(document).off();
});
return false;
});
 });
 </script>
 </head>
 <body>
 <div></div>
 </body>
 </html>

以上所述是小编给大家介绍的jQuery实现拖动效果的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery validata插件实现方法
Jun 25 #jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 #jQuery
jquery图片放大镜效果
Jun 23 #jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 #jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 #jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 #jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 #jQuery
You might like
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
关于JS中的闭包浅谈
2013/08/23 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
js实现上传并压缩图片效果
2018/01/10 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
详解Python:面向对象编程
2019/04/10 Python
在django view中给form传入参数的例子
2019/07/19 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
人事主管岗位职责范本
2013/12/04 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
Python加密技术之RSA加密解密的实现
2022/04/08 Python
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android