<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>拖动层效果</title>

</head>

<body>

<div id="tf" style="position:absolute; width:200px; height:150px; background-color:#ccc; top:300px;

   left:300px; z-index:101; border:solid 1px blue;">

    <div id="title" style="background-color:blue; cursor:move; height:20px; color:#fff; font-size:13px; padding-top: 5px; padding-left:10px;">

        拖动层TF...

    </div>

</div>

<script type="text/javascript">

    tf=document.getElementById("tf"); //获取得tf对象

    var posX; //记录 X

    var posY;// 记录 Y

    //onmousedown 表示鼠标在按下时发生，记录当前位置

    tf.onmousedown=function(e)

    {

        if(!e)

          e=window.event;

          posX=e.clientX-parseInt(tf.style.left); //自已本身位

          posY=e.clientY-parseInt(tf.style.top);//自已本身位

          tf.onmousemove=function(ev)

            {

                if(ev==null)

                 ev=window.event;

                 tf.style.left = (ev.clientX - posX) + "px";

                 tf.style.top = (ev.clientY - posY) + "px";

            }

    }

    tf.onmouseup=function()

    {

      //onmouseup 事件会在鼠标按键被松开时发生。

      tf.onmousemove=null;

    }

</script>

</body>

</html>

拖动层效果

拖动层TF...

JS 拖动原理的更多相关文章

  1. js拖动层

    模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...

  2. js 深入原理讲解系列-Promise

    js 深入原理讲解系列-Promise 能看懂这一题你就掌握了 js Promise 的核心原理 不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? const ...

  3. js 深入原理讲解系列-事件循环

    js 深入原理讲解系列-事件循环 能看懂这一题你就掌握了 js 事件循环的核心原理 不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? console.log(' ...

  4. js 深入原理讲解系列-currying function

    js 深入原理讲解系列-currying function 能看懂这一题你就掌握了 js 科里函数的核心原理 不要专业的术语,说人话,讲明白! Q: 实现 sum 函数使得以下表达式的值正确 cons ...

  5. Immutable.js 实现原理

    Immutable.js 实现原理 Immutable collections for JavaScript v4.0.0-rc.12 released on Oct 31, 2018 https:/ ...

  6. JS拖动div的原理

    要实现移动窗体,首先要捕获三个参数:1.a = 鼠标点击时的坐标.2.b = 被移动窗体的左顶点坐标.3.c = 鼠标移动时的坐标.然后还要算出你鼠标无论点击窗体哪个位置,移动改变的都是 (d = 窗 ...

  7. require.js工作原理（初始）

    详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...

  8. js 闭包原理理解

    问题?什么是js(JavaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 很显然 ...

  9. 模块化开发之sea.js实现原理总结

    seajs官网说:seajs是一个模块加载器,所以学习它并不难. 在我的理解就是:本来我们是需要手动创建 script标签 引入 js文件的,但用seajs后,它就自动帮我们完成这些工作. 这里只说实 ...

随机推荐

  1. tableview的两个重用cell方法

    今天在学习IAP的时候无意间看到原来  tableView: cellForRowAtIndexPath:方法中有两个获得重用cell的方法,一直以来都是用 UITableViewCell  *cel ...

  2. Minimum edit distance（levenshtein distance）(最小编辑距离)初探

    最小编辑距离的定义:编辑距离(Edit Distance),又称Levenshtein距离.是指两个字串之间,由一个转成还有一个所需的最少编辑操作次数.许可的编辑操作包含将一个字符替换成还有一个字符. ...

  3. 解构赋值 和 symbol

    1.数组解构 let [a,b,c,d] = ['aa','bb',77,88] 嵌套数组解构 let [a,b,[c,d],e] = ['aa','bb',[33,44],55] 空缺变量 let ...

  4. Qt 5.3更新无数，更改C++控制台输出最为赞

    迁移至 多色网

  5. form表单元素设置只读

      form表单元素设置只读 CreateTime--2017年5月5日11:42:41 Author:Marydon 1.设置文本框只读 <!-- 方法一:简写 --> <inpu ...

  6. OFBiz：初始RequestHandler

    RequestHandler,可以称之为请求处理器,在ControlServlet.init()中初始化: public class ControlServlet extends HttpServle ...

  7. Android开发之Shortcuts, LiveFolder, Widget

    2013-07-05 桌面组件包括:快捷方式(Shortcuts),实时文件夹(Live Folder),桌面插件(Widget).   快捷方式用于启动应用程序的某个组件,例如Activity, S ...

  8. C3P0连接参数解释

    <c3p0-config> <default-config> <!--当连接池中的连接耗尽的时候c3p0一次同时获取的连接数.Default: 3 --> < ...

  9. nginx根据token做频率限制

    在 nginx.conf 文件添加配置 limit_conn_log_level error; limit_conn_status ; limit_conn_zone $cookie_gray_DF_ ...

  10. DataGridView 的单元格的边框、 网格线样式的设定

    1) DataGridView 的边框线样式的设定DataGridView 的边框线的样式是通过 DataGridView.BorderStyle 属性来设定的. BorderStyle 属性设定值是 ...