WEB前端开发学习----11. JQuery 实现简单的拖拽效果

标签：

拖拽效果在网页中很常见。实现起来也不难。记录一下今天实现的简单效果。

拖拽演示

快速拖动时，会出现问题，以后修改.

说白了，就是3个点击事件。

1. 按下鼠标左键， 触发点击事件，此时记录下可以得到鼠标相对于拖动控件的位置（当前鼠标位置-控件位置）；

2. 拖动鼠标，触发移动事件，可以计算出鼠标移动的距离（当前鼠标位置-之前算出的相对位置），也就是拖拽控件所移动的距离；

3. 鼠标抬起，结束拖动。

在JQ中，event.pageX    event.pageY可以获取鼠标的位置，相对于文档左上角。

如图：

注意，在jq获取控件的位置时：

x=event.pageX-parseInt($("#box").css("left"));
y=event.pageY-parseInt($("#box").css("top"));

要去掉单位px.

但是 在修改控件位置时，不要加单位，也不要加引号，也不用加单位px！

dx=event.pageX-x;
dy=event.pageY-y;
//不要加引号！！！
$("#box").css({
"top":dy,"left":dx
})

完整代码：

WEB前端开发学习----11. JQuery 实现简单的拖拽效果

标签：

原文地址：http://www.cnblogs.com/cdh-fw/p/4179214.html