<!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. jQuery 遍历方法

    http://www.runoob.com/jquery/jquery-ref-traversing.html

  2. ajax post 请求415\ 400 错误

    今天用ajax 向后台发送 post请求时,出现了两个问题: 1, 发送请求后,控制台 返回  Unsupported media type-415(不支持的媒体类型),这时突然想起来,post 请求 ...

  3. php操作ini配置文件

    有些配置化的数据放到配置文件可以方便管理,比如数据库信息,路由信息,先建立配置文件,test.ini [database_setting] host=127.0.0.1 user=root passw ...

  4. mybatis入门_mybatis基本原理以及入门程序

    一.传统jdbc存在的问题 1.创建数据库的连接存在大量的硬编码, 2.执行statement时存在硬编码. 3.频繁的开启和关闭数据库连接,会严重影响数据库的性能,浪费数据库的资源. 4.存在大量的 ...

  5. python GUI输入窗口

    为了解决 sublime text 下 python 的 raw_input() 函数无法起效,便萌生了个用 GUI 窗口来获取输入的想法,一开始想用 Tkinter,后来想了下还是用 PyQt 吧, ...

  6. oracle 存储过程创建及执行简单实例

    1. 创建 CREATE OR REPLACE PROCEDURE getAplage(eNo IN NUMBER,salary OUT NUMBER) AS BEGIN SELECT AplAge ...

  7. python——初识django的template

    这周听了老师讲关于django的框架问题,第一次比较透彻的了解了mtv框架.也是第一次接触模板的概念,研究了一下,现在就记录下来好嘞... 首先要介绍一点关于django的模板:我们为什么要使用模板呢 ...

  8. linux工具apt、yum和dnf运用

      首先,说明一下我的环境:ubuntu16.04. 什么是APT: 高级包装工具(英语:Advanced Packaging Tools,简称:APT)是Debian及其衍生发行版(如:ubuntu ...

  9. ef join 用法

    var customers = DB.Customer.Join(DB.Commission, cst => cst.CommissionId,                          ...

  10. 树（三）——自平衡二叉树（AVL）

    简介 自平衡二叉树(AVL)属于二叉平衡树的一类,此类树主要完成一个从键到值的查找过程,即字典(或映射),它维护树高度的方式与其他数据结构不同. 自平衡规则: AVL树的左.右子树都是AVL树 左.右 ...