<!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. Apache问题综述

    1.配置好了,访问的时候出现Forbbiden,如下图:解决方法:1.修改读写权限: 2.将配置文件中httpd.conf的<Directory>中的Denly from all 改成Al ...

  2. android 程序更新（没有sdcard）

    今天总结一下我们写的程序需要更新(默认用户已经安装上旧版本了),而用户更新时却没有sdcard的情况,如果有sdcard,那就不用废话了... 先说一下软件更新的基本原理,从服务器下载一个程序的apk ...

  3. HTML charset 网页编码设定

    一:HTML4 <metahttp-equiv="content-type"content="text/html; charset=UTF-8" /> ...

  4. android java 设计模式详解 Demo

    android java 设计模式详解 最近看了一篇设计模式的文章,深得体会,在此基础我将每种设计模式的案例都写成Demo的形式,方便读者研究学习, 首先先将文章分享给大家: 设计模式(Design ...

  5. 使用 Tmux 强化终端功能

    来自 tmux是一个优秀的终端复用软件,类似GNU Screen,但来自于OpenBSD,采用BSD授权.使用它最直观的好处就是通过一个终端登录远程主机并运行tmux后,在其中可以开启多个控制台而无需 ...

  6. linux命令创建和修改用户及密码

    linux下创建用户 1.添加ftp用户 useradd ftpname -d /home/ftp passwd ftppwd 以下操作都以root权限进行: service vsftpd start ...

  7. EntityFramework~~~三种模式

    1:database-first 2:model-first 3:code-only 此处的code-only也就是大家叫的code-first,但是正确的叫法应该是code-only

  8. Linux命令-权限管理命令:chmod

    特别注意:在linux中,目录通常是有r和x两个权限的.删除文件的前题是要对文件所在的目录有w的权限才可以. cd /tmp 切换到tmp目录下面 touch chengshi.list 在当前目录中 ...

  9. iOS多线程常用类说明

    iOS的多线程,涉及到如下一些类,这里集中做个介绍,免得混淆. 1.NSTimer 很显然,这是定时器类 2.NSTask iOS 不支持 NSTask 在很多并发操作的时候,多线程太耗资源,也太危险 ...

  10. MFC显示GIF动画图片

    本帖则将讨论如何在MFC的对话框里显示GIF动画图片.一些关于传统控件的美化方法正在研究当中会陆续发帖的. 这是本帖用到的一个VS2008例程.  附件  GifPicture.rar (138.1 ...