网络人 > javascript技术 > 用jQuery实现拖拽移动效果

用jQuery实现拖拽移动效果

用简单的几行代码就可以实现炫酷的效果。下面是我自己写的一个拖拽效果,只用了几行代码,供参考。

主要是为了学习jQuery的事件、事件绑定、解除绑定的方式。

有详细的注释,供参考学习。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery拖拽</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<body>
<img id="go" style="position:absolute" src="http://www.neter8.com/static/logo.gif">
<script>
obj=$("#go");
//通过jQuery的鼠标按下事件得到event
obj.mousedown(function(event){
	goX=event.clientX-obj.offset().left;//得到鼠标左边距差
	goY=event.clientY-obj.offset().top;//得到鼠标顶部边距差
	$(document).bind("mousemove",move);//当鼠标移动绑move定事件
	$(document).bind("mouseup",stopGo);//当鼠标抬起绑定stopGo事件
	return false;//有event的时候需要返回false防止异常
});
function move(event){obj.css({"left":(event.clientX-goX)+"px","top":(event.clientY-goY)+"px"});return false;}//通过坐标值使用绝对定位调整位置
function stopGo(){
	$(document).unbind("mousemove",move);//删除鼠标移动绑定(move)
	$(document).unbind("mouseup",stopGo);//删除自己的事件绑定(stopGo)
}
</script>
</body>
</html>

除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/javascript/22.html

下一篇 »:PHP 7.2生产环境版发布了,性能越来越快了。«上一篇:使用jQuery快速验证表单,使用data收集

《用jQuery实现拖拽移动效果》的网友评论(0)

感谢打赏!