<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>js拖拽效果</title>

 </head>

 <body>

     <script type="text/javascript">

         var oDiv = document.getElementById('login');

         oDiv.onmousedown = function(e){

             var event = event || window.event;//window.event兼容IE,当事件发生时有效

             var diffX = event.clientX - oDiv.offsetLeft;//获取鼠标点击的位置到所选对象的边框的水平距离

             var diffY = event.clientY - oDiv.offsetTop;

             document.onmousemove = function(e){//需设为document对象才能作用于整个文档

                 var e = e||window.event;

                 oDiv.style.left = e.clientX - diffX +'px';//style.left表示所选对象的边框到浏览器左侧距离

                 oDic.style.top = e.client - diffY +'px';

             }

             document.onmouseup = function(){

                 oDiv.onmousemove = null;//清除鼠标释放时的对象移动方法

                 oDiv.onmouseup = null;

             }

          }

     </script>

 </body>

 </html>

js拖拽效果的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  3. js拖拽效果的实现及原理

    元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. 拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件:鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离 ...

  4. js拖拽效果的实现

    1.最基础的写法 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...

  5. js拖拽效果实现

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

  6. js拖拽效果详细讲解

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

  7. js div浮动层拖拽效果代码

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

  8. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  9. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

随机推荐

  1. golang 管道

    2.管道简介Golang的原子并发特性使得它很容易构造流数据管道,这使得Golang可有效的使用I/O和多CPU特性.本文提出一些关于管道的示例,在这个过程中突出了操作失败的微妙之处和介绍处理失败的具 ...

  2. PBOC~PPT-补充A(转)

    qPBOC简介PBOC 3.0非接交易包括:非接PBOC和qPBOC.非接PBOC流程与接触式无异,仅命令交互方式改变,故不再赘述. qPBOC - 快速借记/贷记,交易特点:目录选择PPSE使用“2 ...

  3. ireport5.6+jasperreport6.3开发（一）--中文环境配置在

    ireport在pdf的情况下无法显示中文字的解决方法 1,首先下载宋体的ttf(注意ttc的不行)下载链接如下(注意你可以用其他的ttf不一定要宋体) http://files.cnblogs.co ...

  4. (转)再不用担心DataRow类型转换和空值了（使用扩展方法解决高频问题）

    再不用担心DataRow类型转换和空值了(使用扩展方法解决高频问题) XML文档操作集锦(C#篇) webapi文档描述-swagger

  5. 51nod 1240 莫比乌斯函数

    题目链接:51nod 1240 莫比乌斯函数 莫比乌斯函数学习参考博客:http://www.cnblogs.com/Milkor/p/4464515.html #include<cstdio& ...

  6. Android开发--Android Studio配置

    1.常见问题 emulator: You might want to adjust your AVD RAM size and/or HAXM configuration to run in fast ...

  7. oracle initialization or shutdown in progress解决方法

    [解决方法]   SQL> connect sys/hope as sysdba 已连接. SQL> shutdown normal ORA-01109: 数据库未打开     已经卸载数 ...

  8. 【IE6双倍边距】-IE6双倍边距的bug

    效果 代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; backgroun ...

  9. hadoop3.0 alpha1 安装配置

    1. 官网下载 wget  http://apache.fayea.com/hadoop/common/hadoop-3.0.0-alpha1/hadoop-3.0.0-alpha1.tar.gz 2 ...

  10. LNAMP服务器环境搭建（手动编译安装）

    LNAMP服务器环境搭建(手动编译安装) 一.准备材料 阿里云主机一台,操作系统CentOS 6.5 64位 lnamp.zip包(包含搭建环境所需要的所有软件) http://123.56.144. ...