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编写textarea输入字数限制代码
Mar 23 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 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
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
select组合框option的捕捉实例代码
2008/09/30 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
javascript 常用功能总结
2012/03/18 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python的高级Git库 Gittle
2014/09/22 Python
python实现人脸识别代码
2017/11/08 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
工人先进事迹材料
2014/12/26 职场文书
给下属加薪申请报告
2015/05/15 职场文书
西柏坡观后感
2015/06/08 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL