<!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. C#基础视频教程6.2 如何简单读写数据库

    上一节我们简单介绍了数据库的读写,所使用的数据库都是随便写的(用水果代替,但不是真正的食品零售数据表,至少没有价格,销量等等).这一节我们思考如何实现一个测试题的数据库,所谓的测试题数据库就是假定系统 ...

  2. ASP站点无法访问怎么办

    确保启用了目录浏览功能

  3. Python网络爬虫 - 1. 准备工作

    1. 安装Beautiful Soup 下载地址 http://www.crummy.com/software/BeautifulSoup/bs4/download/4.4/ 解压后,进入根目录 控制 ...

  4. java创建二叉树并递归遍历二叉树

    二叉树类代码: package binarytree; import linkqueue.LinkQueue; public class BinaryTree { class Node { publi ...

  5. Quartz.Net的使用（简单配置方法）定时任务框架

    Quartz.dll 安装nuget在线获取dll包管理器,从中获取最新版 Quartz.Net是一个定时任务框架,可以实现异常灵活的定时任务,开发人员只要编写少量的代码就可以实现“每隔1小时执行”. ...

  6. sae python中Mysql中文乱码的解决

    一開始我用的是: db=MySQLdb.connect(db=sae.const.MYSQL_DB,user=sae.const.MYSQL_USER,passwd=sae.const.MYSQL_P ...

  7. Guava ---- Ordering排序工具

    使用Guava的排序工具类, 高速实现对象的单变量排序和多变量排序, 让你的开发效率爆炸... import com.google.common.collect.Lists; import com.g ...

  8. linux命令：tail 命令

    tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但刷新, ...

  9. 利用端口映射解决:拥有公网IP有限,内网需要访问因特网

    动态端口映射:   内网中的一台电脑要访问新浪网,会向NAT网关发送数据包,包头中包括对方(就是新浪网)IP.端口和本机IP.端口,NAT网关会把本机IP.端口替换成自己的公网IP.一个未使用的端口, ...

  10. vsCode 添加浏览器调试和js调试的方法总结

    vsCode 添加浏览器调试和js调试的方法 1.直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件) 在launch.json文件中的配置如下: {     " ...