以前写过一个拖动效果的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. 【poj1087/uva753】A Plug for UNIX(最大流)

    A Plug for UNIX   Description You are in charge of setting up the press room for the inaugural meeti ...

  2. buffer busy waits

    Buffer busy waits 当会话想要访问缓冲区中的数据块,而该数据块正在被其他会话使用时将产生Buffer busy waits事件. 其他会话可能正从数据文件向缓冲器读取同样的数据块,或正 ...

  3. 【HDOJ】2782 The Worm Turns

    DFS. /* 2782 */ #include <iostream> #include <queue> #include <cstdio> #include &l ...

  4. [LeetCode#276] Paint Fence

    Problem: There is a fence with n posts, each post can be painted with one of the k colors. You have ...

  5. BZOJ1613: [Usaco2007 Jan]Running贝茜的晨练计划

    1613: [Usaco2007 Jan]Running贝茜的晨练计划 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1138  Solved: 554[ ...

  6. 博弈论（二分图匹配）：NOI 2011 兔兔与蛋蛋游戏

    Description Input 输入的第一行包含两个正整数 n.m. 接下来 n行描述初始棋盘.其中第i 行包含 m个字符,每个字符都是大写英文字母"X".大写英文字母&quo ...

  7. [转]33 useful Keyboard Shortcuts for Run commond

    原文: http://www.shortcutworld.com/en/win/Run-command.html 1. Calling Run CommandWin + r               ...

  8. Unity3d 获取屏幕depth与normal

    Depth 获取Depth的几种方法,分别有不同效果 1. <span style="font-size:14px;">            float2 depth ...

  9. [转载]jQuery.extend 函数详解

    JQuery的extend扩展方法:      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解.      一.Jquery的扩展方 ...

  10. java ee eclipse 配置 ssh框架

    mvnDebug tomcat:run 这条命令主要用来远程测试,它会监听远程测试用的8000端口,在eclipse里打开远程测试后,它就会跑起来了,设断点,调试,一切都是这么简单. 0.如果是mav ...