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查找dom的几种方法效率详解
May 17 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 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+js实现百度地图多点标注的方法
2016/11/30 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
jquery中ajax学习笔记4
2011/10/16 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python Logging 日志记录入门学习
2018/06/02 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
python中使用while循环的实例
2019/08/05 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
《小熊住山洞》教学反思
2014/02/21 职场文书
学校志愿者活动总结
2014/06/27 职场文书
搞笑的获奖感言
2014/08/16 职场文书
悬空寺导游词
2015/02/05 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
MySQL优化之慢日志查询
2022/06/10 MySQL