工作中的一个项目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. Java50道经典习题-程序26 求星期

    题目:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续 判断第二个字母.分析:用情况语句比较好,如果第一个字母一样,则判断用情况语句或if语句判断第二个字母.周一至周日的英文单词 ...

  2. 输入框获取焦点后placeholder文字消失、修改placeholder的样式

    输入框获取焦点后placeholder文字消失: <input placeholder='' onfocus="this.placeholder=''" onblur=&qu ...

  3. vimrc配置-中文编码和python中的中文注释

    set fileencoding=gb18030"设置vim输入的编码 set fileencodings=gb18030,...,"打开文档时vim自动匹配可能的编码方式 在py ...

  4. 文本PDG转PDF

    作者:马健邮箱:stronghorse_mj@hotmail.com发布:2008.08.03更新:2008.08.24 补充说明:此文成文较早,当时文本PDG如果不想用官方浏览器SSREADER看, ...

  5. js 值传递,引用传递

    参考:http://www.cnblogs.com/lcngu/p/5876273.html JS的基本类型,是按值传递的. 对象类型按共享传递的(call by sharing,也叫按对象传递.按对 ...

  6. Django之视图与模板以及在模板中使用bootstrap

    从url中也可以传递参数给后台进行处理.比如http://127.0.0.1:8001/add/?a=4&b=5. 这个链接传入a=4,b=5.后台将进行a+b的处理 新增处理函数 def a ...

  7. SnackBar使用

    注意:build(BuildContext context)在 Scaffold.of(context)之前时,会报错,解决办法:通过build widget来解决,如下代码. import 'pac ...

  8. new types may not be defined in a return type(c++语言编译错误,处理)

    在写程序的时候,定义类时要在大括号后面加上: class Point{ public: Point(int a,int b); Point(const Point &p); int getx( ...

  9. java中抽象类与接口

    1.抽象类是类,它的子类不能再继承其它类了,但可以实现一个和多个接口.接口不是类,它的子接口可以继承多个接口.2.抽象类中是可以有不用abstract修饰的方法,而接口中只能有抽象方法,即方法都要用a ...

  10. USACO 1.3.6 Ski Course Design[滑雪课程设计]

    先说说思路: 这题比上一道坑人的wormholes简单多了!我一看到这题,“XXX设计”,还以为要用到什么dp呢,没想到是水题 用两层循环,第一层循环相差17中的上界,第二层遍历所有的山峰计算答案.并 ...