以前写过一个拖动效果的Demo，拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的。计算效率差，而且效果不好。所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果。

其实顺滑的拖拽效果的突破口有两点：

  1. 事件捕捉要去捕捉document的鼠标位置。
  2. 使用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;

    } 

})

效果如下：

Drag Panel

Web的鼠标拖动效果的更多相关文章

  1. jquery-11 如何实现标签的鼠标拖动效果

    jquery-11 如何实现标签的鼠标拖动效果 一.总结 一句话总结:核心原理:1.标签实现绝对定位,位置的话跟着鼠标走.2.点击标签的话,给标签绑定事件,停止按住鼠标的话,解除绑定的事件. 1.事件 ...

  2. Web组件流畅拖动效果

    拖动效果,可以形象的帮助用户处理一些问题,比如Windows删除文件,只需将文件拖动至回收站即可.比起右键显得更形象,我觉得更好玩一点^_^.当然,在其他许多方面,其实也有用到拖动效果,只是他们不是那 ...

  3. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  4. CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果

    CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...

  5. 图片3d轮放查看效果(V2.0)：使用鼠标拖动实现图片的轮放

    上面的版本号为通过左右button实现图片轮放,这个版本号.是通过在窗体拖动鼠标.左右滑动图片. 关键点在于选择一个合适的值.使鼠标拖动时.全部图片均可显示,可是不会滑动过快或离开窗体. 不多说,直接 ...

  6. HTML 通过js实现div的拖动效果

    最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...

  7. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  8. vc++ mfc中拖动效果的实现 借助于CImageList

    拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道.纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做到了极致.其实说起来拖动的实现也很简单,对于有句柄 ...

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

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

随机推荐

  1. PAT (Basic Level) 1002. 写出这个数 (20)

    读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值.这里保证n小于10100. 输出格式:在一行内输出n的各位数字之和的每 ...

  2. 如何使用 Laravel Facades ？

    Facade 布局是在面向对象编程中经常使用的一种软件设计布局方式.Facade 实际上是一种包括复杂函数库的类,提供了更加简洁易读的接口.Facade 布局还能为一组结构复杂.设计简陋的 API 提 ...

  3. Hibernate 注意命名与数据库关键字的冲突 处理方法

    比如你映射了一个名称为key的属性,这是数据库所不允许的,因为它是数据库的关键字. 因此,你必须为此属性添加一对符号,即键盘上“1”键的左边的按键.

  4. Astyle：代码格式化工具简明指南

    astyle是一个我自己常用的开放源码工具.它可以方便的将程序代码格式化成自己想要的样式而不必人工修改.本来嘛,作为高等生物应该优先去做一些智慧的事情,而不是把时间消耗在机器可以完美完成的事情上. 想 ...

  5. 运行时改变控件的大小（点击后立刻ReleaseCapture，然后计算位移，最后发消息改变位置）——最有趣的是TPanel其实也有窗口标题，因此可发HTCAPTION消息

    //光标在控件不同位置时的样式 // 由于拐角这点手动精确实在困难 所以用范围 范围+3 这样很容易就找到这一点了 procedure CtrlMouseMove(Ctrl: TWinControl; ...

  6. 第1章（三）安装VS2015和Xamarin For VS

    原文 第1章(三)安装VS2015和Xamarin For VS 操作系统:Win7  64位(sp1或更高版本) 1.安装VS2015 VS2015简体中文企业版:vs2015.ent_chs.is ...

  7. 修改uCOS_II以实现“优先级+时间片”联合调度

    本文在uCOS II上增加时间片任务调度的的原理: 对设置为同优先级的任务使用时间片调度,不同优先级任务仍然使用uCOS II的优先级调度策略.在同优先级任务的时间片调度中,所有任务暂时时间片长度固定 ...

  8. C++ 1

    1 new 建立一个堆对象 new 类名(初值列表) 返回一个指针 int * p=new int(3)动态分配 2 delete  释放指针 delete p; delete [] p ;释放动态申 ...

  9. [LeetCode#128]Word Ladder II

    Problem: Given two words (start and end), and a dictionary, find all shortest transformation sequenc ...

  10. ☀【Zepto】touch events

    https://github.com/madrobby/zepto jTouchhttps://github.com/liutian1937/jTouch iphone.ipod Touch.ipad ...