用jQuery实现拖拽移动效果_javascript技术

用jQuery实现拖拽移动效果

Kwok 发表于：2017-11-27 19:27:32 点击：95 评论： 0

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

主要是为了学习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.55mx.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>

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/22

标签：jQuery 拖拽Kwok最后编辑于：2017-11-27 20:27:19

用jQuery实现拖拽移动效果

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

最新文章

本站推荐阅读

热门点击文章

用jQuery实现拖拽移动效果

相关文章

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

最新文章

本站推荐阅读

热门点击文章