Web的鼠标拖动效果
以前写过一个拖动效果的Demo，拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的。计算效率差，而且效果不好。所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果。
其实顺滑的拖拽效果的突破口有两点：
- 事件捕捉要去捕捉document的鼠标位置。
- 使用setInterval功能计算拖拽元素的新位置。
使用jQuery，经过一些简单的重构和调试，将代码完善如下：
drag.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="drag.css">
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="drag.js"></script>
</head>
<body>
<div class="drag-panel">
<div class="title">Drag Panel</div>
</div>
</body>
</html>
drag-panel.css ，做一些简单的修饰：
.drag-panel{
position: absolute;
width:300px;
height:100px;
border:1px solid black;
cursor:default
}
.drag-panel .title{
text-align:center;
background-color:yellowgreen;
}
drag.js ，效果非常好：
$(function(){
var m_x0,m_y0, // 鼠标坐标0
m_x1,m_y1, // 鼠标坐标1
timeHandler //定时器句柄
var $dragPanel = $(".drag-panel");
var $dragTitle = $(".drag-panel .title");
// 鼠标点击，触发拖拽过程。
$dragTitle.mousedown(function(e){
// 确定上一次调用的定时器是被清空了。
if(timeHandler!=0){
window.clearInterval(timeHandler);
}
// 确定鼠标的初始位置。初始状态下，鼠标位置1与鼠标位置0必须相同。
m_x0 = m_x1 = e.clientX;
m_y0 = m_y1 = e.clientY;
// 鼠标移到需要扑捉document的鼠标位置。
// mouseup表示鼠标拖拽动作结束。该动作清空拖拽动期间的计算，且mouseup也只执行一次。
$(document).mousemove(mousemoveFunc).one("mouseup",mouseupFunc);
// 定时计算拖拽元素位置。
timeHandler = window.setInterval(dragPos,30);
});
// 鼠标移动，获取鼠标的全局坐标。
function mousemoveFunc(e){
window.console.log(new Date().getTime());
m_x1 = e.clientX;
m_y1 = e.clientY;
}
// 鼠标拖拽动作结束，清空的拖拽期间的计算。
function mouseupFunc(e){
if(timeHandler>0){
window.clearInterval(timeHandler);
timeHandler = 0;
$(document).unbind("mousemove",mousemoveFunc);
}
}
// 拖拽计算。
function dragPos(){
var dm_x = m_x1 - m_x0;
var dm_y = m_y1 - m_y0;
var p0 = $dragPanel.offset();
$dragPanel.css("top",p0.top+dm_y+"px");
$dragPanel.css("left",p0.left+dm_x+"px");
m_x0 = m_x1;
m_y0 = m_y1;
}
})
效果如下：
Web的鼠标拖动效果的更多相关文章
- jquery-11 如何实现标签的鼠标拖动效果
jquery-11 如何实现标签的鼠标拖动效果 一.总结 一句话总结:核心原理:1.标签实现绝对定位,位置的话跟着鼠标走.2.点击标签的话,给标签绑定事件,停止按住鼠标的话,解除绑定的事件. 1.事件 ...
- Web组件流畅拖动效果
拖动效果,可以形象的帮助用户处理一些问题,比如Windows删除文件,只需将文件拖动至回收站即可.比起右键显得更形象,我觉得更好玩一点^_^.当然,在其他许多方面,其实也有用到拖动效果,只是他们不是那 ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
- CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果
CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...
- 图片3d轮放查看效果(V2.0)：使用鼠标拖动实现图片的轮放
上面的版本号为通过左右button实现图片轮放,这个版本号.是通过在窗体拖动鼠标.左右滑动图片. 关键点在于选择一个合适的值.使鼠标拖动时.全部图片均可显示,可是不会滑动过快或离开窗体. 不多说,直接 ...
- HTML 通过js实现div的拖动效果
最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...
- jQuery实现鼠标拖动改变Div高度
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...
- vc++ mfc中拖动效果的实现 借助于CImageList
拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道.纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做到了极致.其实说起来拖动的实现也很简单,对于有句柄 ...
- js实现一个可以兼容PC端和移动端的div拖动效果
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...
随机推荐
- 跨平台的WatiForSingleObject实现
移植win32程序时,有一个难点就是涉及到内核对象的操作,需要模拟win32的实现. 其中比较奇葩的一个是WaitForSingleObject系列. Linux中没有类似的timeout实现,模拟这 ...
- java环境变量设置方法
1.安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为D:\java\jdk1.5.0_08: 2.安装完成后,右击“我的电脑”,点击“属性”: 3.选择“高 ...
- 一些有用的 Emacs 配置（窗口快速切换、一键透明效果、任意位置删除整行等）
本篇文章记录的是一些有用的 Emacs 配置,有些是自己原创,有些是借鉴别人(能记起来出处的我放了链接). 规定:C 代表 Ctrl,M 代表 Alt. 1.设置一次跳跃 n 行的快捷键 按 C-M- ...
- Qt4.8 移植（超详细Configure的参数）
Qt4.8.6 configure 参数 不只是适用于Qt4.8.6,原则上适用于Qt4所有版本 Usage: configure [-h] [-prefix <dir>] [-prefi ...
- ibatas的一些实例及解释
Student.xml : <?xmlversion="1.0"encoding="UTF-8"?> <!DOCTYPE sqlMap PUB ...
- Image Builder, 快速固件生成器
Image Builder, 快速固件生成器, 用此创建固件可以省去重新编译的麻烦,大大缩短编译时间. 利用 Imagebuilder 可以生成自己所需要的固件, 告别和别人伸手乞讨固件的磨练 1. ...
- Android+clipse导入工程提示:invalid project description
今天遇到一个奇怪的问题.一个android的工程用eclipse导入的时候,提示错误.错误为:invalid project description . details为xxxx project ov ...
- WordPress Simple Login Registration插件’username‘参数跨站脚本漏洞
漏洞名称: WordPress Simple Login Registration插件’username‘参数跨站脚本漏洞 CNNVD编号: CNNVD-201308-519 发布时间: 2013-0 ...
- 大脑提取每一个体素26领域的matlab代码
%-------------- outer loop for x= 1:40 for y =1:48 for z =1:34 %----------inter loop x=20; y=30; z=1 ...
- HDU-1236 排名
http://acm.hdu.edu.cn/showproblem.php?pid=1236 学会怎样按字典序排序的模板. 排名 Time Limit: 2000/1000 MS (Java/Othe ...