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 禁止鼠标右键并监听右键事件
Apr 27 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
Jquery ajax书写方法代码实例解析
Jun 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
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
ExpressJS入门实例
2015/01/14 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Python 中 Meta Classes详解
2016/02/13 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
简单了解python PEP的一些知识
2019/07/13 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
wxPython实现绘图小例子
2019/11/19 Python
在python中做正态性检验示例
2019/12/09 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
哈弗商学院毕业生求职信
2014/02/26 职场文书
新春文艺演出主持词
2014/03/27 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
疾病证明书
2015/06/19 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript