<!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. IOS APP开发UI上的尺寸注意问题（屏幕、适配、分辨率）

  2. PHP RESTful

    PHP RESTful REST(英文:Representational State Transfer,简称REST) ,指的是一组架构约束条件和原则. 符合REST设计风格的Web API称为RES ...

  3. itext处理pdf

    http://www.java2s.com/Tutorial/Java/0419__PDF/DecryptPdffile.htm

  4. [Exceptions Spring 2] - Cannot create a session after the response has been committed

    2016-02-23 14:06:27,416 [http-bio-8080-exec-1] DEBUG [org.springframework.beans.factory.support.Defa ...

  5. [Swift A] - A Swift Tour

    首先说下自己对Swift语言的一点点看法,对于一个写过javascript和常年写java代码的人来说,学习Swift是一件很简单的事情.就像某某人说过,每个人都有弱点和优点,我到目前为止,只是初步的 ...

  6. Android开发牛刀小试之“AA算钱软件”开发（一）

    事实上想去做android开发已经有非常长一段时间了,可是因为还在上课,加上老板那边的项目接连不断.也一直都没有机会抽出身来做.可是,楼主当然也不会闲着,首先我了解到android开发须要java学习 ...

  7. 随笔小问题（一）--mac打开class文件

    本来不想写这个东西的.但是这个却费了我一番周折. 我要先声明一点的是,我从来不讲iOS当成一个单独的系统,而是将这个操作系统归位unix内核的系统. 简单来说,我把它当成linux在用. 但是,mac ...

  8. Linux下源码安装JDK7

    安装说明 安装环境:Red Hat Enterprise Linux7.1安装方式:源码安装 软件:jdk-7u80-linux-x64.gz 安装 #首先查看系统原有JDK信息 rpm -qa | ...

  9. MySQL UUID函数的详解(转)

    MySQL UUID函数的详解 MySQL中可以有二类用于生成唯一值性质的工具:UUID()函数和自增序列,那么二者有何区别呢?我们就此对比下各自的特性及异同点: l  都可以实现生成唯一值的功能: ...

  10. const与#define、结构体对齐、函数重载name mangling、new/delete 等

    一.bool 类型 逻辑型也称布尔型,其取值为true(逻辑真)和false(逻辑假),存储字节数在不同编译系统中可能有所不同,VC++中为1个字节. 声明方式:bool result; result ...