工作中的一个项目ui界面比较传统(chou),就想着把前端重构一下。内容之一是把导航栏从上方固定高度改为了右侧伸缩的边栏,好处是边栏可伸缩,占用面积小。不完美的地方是有时候会遮挡页面上最右边的按钮,作为一个喜欢追求美的人,是可忍孰不可忍,于是决心改掉这个导航栏,让它可拖拽,如果挡住了就拖一下换个地方,岂不美哉 ?!
  本例实际是只上下拖动,全局自由拖动的话将x坐标一起加入计算即可。
  说干就干,想了下,觉得处理逻辑很清晰:
  1、鼠标放到div上,图标变成可移动的,最好变成五个小指头乱抓的小手形;
  2、mousedown的时候,触发事件,记录div当前位置,鼠标位置;
  3、鼠标开始移动,mousemove触发事件,随时根据鼠标位置的移动距离修改div的位置;注意mousemove要区分鼠标左键是否按下。
  4、到达目的地,mouseup,结束。
  注意第三四两步,第三步的实现有两种方式:
  1、鼠标按下,div绑定mousemove事件,鼠标mouseup的时候移除绑定。
  2、鼠标按下,将全局变量move修改为true,mouseup的时候改为false,mousemove的时候判断move是否为true,true则进行拖动,否则不作任何动作。  
  个人认为第一种方式实现较好,第二种虽然为true直接过了,但仍进行了判断逻辑,相对来说有了多余操作,总是不好的。
  第一版代码,aside边栏div的class:
$(".aside").mousedown(function(e){
$(this).find("li").css("cursor","move");
$(this).find("div").css("cursor","move");
ready2Move = true;
startValue = e.clientY -$(this).offset().top;
return false;
}).mouseup(function(e){
$(this).find("li").css("cursor","pointer");
$(this).find("div").css("cursor","pointer");
ready2Move = false;
startValue = e.clientY -$(this).offset().top;
}).mouseout(function(e){ //这里是为了防止鼠标脱出后仍然控制div移动的情况
$(this).find("li").css("cursor","pointer");
$(this).find("div").css("cursor","pointer");
ready2Move = false;
startValue = e.clientY -$(this).offset().top;
}).mousemove(function (e) {
if(ready2Move){//鼠标按下,并移动
var currentValue = e.clientY;
var distance = currentValue - startValue;
$(".aside").css("top",distance+"px");
}
return false;
});
  return false是为了阻止事件冒泡,防止拖动的时候对外边的文本进行了“选中”操作;
  该版本基本实现了拖动功能,但有个比较严重的问题是div移动的有些卡顿,鼠标拖快了容易跑出div,导致后续的拖动无效。
  经查找资料后,比较一致的说法是事件冒泡导致的,mousemove要一层层冒泡,而且由于是持续触发导致页面渲染速度跟不上鼠标移动速度(这里理论上是即使每移动一个像素触发一次?实际观察发现更像是隔一段时间触发,这个触发的细节没查到相关资料),也就产生了鼠标脱出div的情况。加上return false阻止冒泡,仍然无效,速度很慢。后来无意翻到大神的文章,http://www.cnblogs.com/rubylouvre/archive/2009/09/09/1563342.html,发现大神的做法是将mousemove绑定到window对象上,避免了冒泡。赶紧来试一下:
$(".aside").mousedown(function(e){
$(this).find("li").css("cursor","move");
$(this).find("div").css("cursor","move");
ready2Move = true;
startValue = e.clientY -$(this).offset().top;
return false;
})
$(document).mouseup(function(e){
$(".aside").find("li").css("cursor","pointer");
$(".aside").find("div").css("cursor","pointer");
ready2Move = false;
startValue = e.clientY -$(".aside").offset().top;
}).mousemove(function (e) {
if(ready2Move){//鼠标按下,并移动
var currentValue = e.clientY;
var distance = currentValue - startValue;
$(".aside").css("top",distance+"px");
}
return false;
});
  修改过后,果然拖动效果如丝般顺滑。
  说明:该部分代码是我本地版本,采用的都是全局变量判断是否需要移动的做法,可改为mouseup取消事件的方式,但页面效果差别甚微,暂未改动。更清晰的逻辑请查看http://www.cnblogs.com/rubylouvre/archive/2009/09/09/1563342.html,文中不但有思路,而且有多种写法,还有优化以及一些使用场景的考虑,写的非常好。

div拖动实现及优化的更多相关文章

  1. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  2. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  3. 让一个div拖动和让一个panel拖动加拉大拉小

    一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  4. jquery实现很简单的DIV拖动

    今天用jquery实现了一个很简单的拖动...实现思路很简单  如下: 在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差:    ...

  5. 实现DIV拖动

    Ajax的到来让B/S中的客户端中开发有火了一把,网上出现了很多优秀的开源框架和UI,比较著名了有prototype,YUI,GWT等,但很多时候发现这些东西很难用到你的系统之中,有时候你的系统仅仅需 ...

  6. jQuery实现DIV拖动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

    故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动,  单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...

  8. 手机版 div拖动

    <!doctype html> <html> <head> <title></title> <script type="te ...

  9. 自定义div 拖动。键盘上下左右键移动,ctrl+Q控制是否可以移动,ctrl+回车,返回初始状态

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. DjVu转PDF

    作者:马健邮箱:stronghorse_mj@hotmail.com发布:2009.09.22更新:2012.06.11针对PdfToy的新进展,更新了相关内容. 1 引言2 理论3 实现    3. ...

  2. VMWare虚拟机无法打开内核设备"\\.\Global\vmx86"的解决方法

    cmd执行: 1.net start vmci 2.net start vmx86 3.net start VMnetuserif

  3. 从底层了解ASP.NET体系结构

    导读:  前言  关于ASP.NET的底层的工作机制,最近园子里讨论的甚是火热.相信很多人都看过Rick Strahl先生的一篇经典之作:A low-level Look at the ASP.NET ...

  4. @RestControllerAdvice注解使用

    在spring 3.2中,新增了@ControllerAdvice,@RestControllerAdvice 注解,可以用于定义@ExceptionHandler.@InitBinder.@Mode ...

  5. vue使用过程常见的一些问题

    Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...

  6. dede地图显示最新文章的解决方法

    以DEDECMS5.6为例:sitemap.htm 在/templets/plus/目录里,就算添加了织梦相关标签调用,但却不能显示文章. 这是因为makehtml_map.php不能解析织梦的相关调 ...

  7. jmeter-Http信息头管理器

    今天遇到的问题是:一个报名接口,用户先要登录后,再去报名.而登录页面:用户名.密码.动态图形验证码,所以不能直接使用jmeter参数传值方法. 测试的时候,需要先登录,获取ticket后,才能去请求下 ...

  8. UncategorizedSQLException Mybatis中jdbcType的作用

    使用MyBatis框架做更新操作时,在该字段需要更新的内容为空时,就会出现1111错误,也就是无效的列类型,这个时候你就要使用jdbcType.至于什么时候要使用到javaType我还没遇到过,而且我 ...

  9. Codeforces Round #534 (Div. 2) D. Game with modulo 交互题

    先二分一个区间,再在区间里面二分即可: 可以仔细想想,想明白很有意思的: #include<iostream> #include<cstdio> #include<alg ...

  10. 7.Palindrome Linked List(回文链表)

    Level: ​  Easy 题目描述: Given a singly linked list, determine if it is a palindrome. Example 1: Input: ...