jQuery实现拖动效果的实例代码
更新时间：2017年06月25日 14:50:22 作者：ranruci
这篇文章给大家介绍了jquery实现拖动效果的简单代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧
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 $(document).ready()和JavaScript onload事件
这篇文章主要介绍了全面解析jQuery $(document).ready()和JavaScript onload事件的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了jquery分割字符串的方法,涉及jQuery中使用split方法进行字符串分割的相关技巧,需要的朋友可以参考下2015-06-06
JQuery操作textarea,input,select,checkbox方法
本文给大家汇总介绍了一些JQuery操作textarea,input,select,checkbox的方法和技巧，十分的简单实用，都是小编项目中使用过的，这里推荐给大家。2015-09-09
JQuery获取样式中的background-color颜色值的问题
用JQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome、Firefox显示的格式不一样，经搜索找到了下段代码可解决此问题，感兴趣的朋友可以参考下2013-08-08
jQuery 的toggle()函数使用show()或hide()函数来切换HTML元素的可见状态。今天我们来探讨下jquery中toggle函数交替使用问题2015-06-06
Jquery知识点一 Jquery的ready和Dom的onload的区别
onload是所有dom元素创建完毕，图片、css等都加在完毕后才触发 ready则是dom元素创建完毕后就被触发2011-01-01
这篇文章主要介绍了jQuery实现图片加载完成后改变图片大小的方法,结合实例形式分析了jQuery图片样式与页面元素属性动态操作的相关技巧,需要的朋友可以参考下2016-03-03
支持PC端手机端幻灯片代码是一款支持移动触摸，支持鼠标拖拽切换，支持带进度条的自动播放模式，本文给大家分享一款基于jquery代码实现支持pc端手机端幻灯片代码，感兴趣的朋友一起学习吧2015-11-11
这篇文章主要介绍了JQuery中Ajax()的data参数类型,结合实例形式较为详细的分析了ajax方法中data的具体类型,需要的朋友可以参考下2015-12-12
jquery对象的相应方法DOM对象不能使用，而DOM对象的相应方法jquery也不能使用。所以在具体项目中要注意Jquery对象与DOM对象的转换问题2009-04-04
最新评论