首页 > web前端 > js教程 > jQuery拖动效果实现方法

jQuery拖动效果实现方法

小云云
发布: 2018-01-06 10:31:19
原创
1142 人浏览过

本文主要给大家介绍了jquery实现拖动效果的简单代码,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家。

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

<!DOCTYPE html>
 <html>
<head>
<style>
 p{ 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;
$(&#39;p&#39;).mousedown(function(ev){
disX = ev.pageX - $(this).offset().left;//获取鼠标到元素的left,top位置
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){
$(&#39;p&#39;).css(&#39;left&#39;,ev.pageX - disX);//获取移动后鼠标的位置,并重新赋值给元素
$(&#39;p&#39;).css(&#39;top&#39;,ev.pageY - disY);
});
$(document).mouseup(function(){
$(document).off();
});
return false;
});
 });
 </script>
 </head>
 <body>
 <p></p>
 </body>
 </html>
登录后复制

相关推荐:

微信小程序实现鼠标拖动效果实现方法

利用js实现div拖动效果实例 (兼容PC端和移动端)

js实现div在页面拖动效果

以上是jQuery拖动效果实现方法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板