<!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. FFmpeg官方文档之————先进音频编码（AAC）

    先进音频编码(AAC)的后继格式到MP3,和以MPEG-4部分3(ISO / IEC 14496-3)被定义.它通常用于MP4容器格式; 对于音乐,通常使用.m4a扩展名.第二最常见的用途是在MKV( ...

  2. C语言习题（结构）

    实际应用中经常会用到二维平面上的点,点的操作包括设置点的位置( pointT setPoint(double x , double y ) ),显示第n个点的位置( void showPoint(po ...

  3. GitHub 用到的英语

    1.Github首页Pull requests   Issues Gist请求 问题 要点Learn Git and GitHub without any code!没有任何代码学习Git和GitHu ...

  4. PPP协议

    PPP协议PPP协议是二层(数据链路层)协议,常用于拨号上网时客户端向服务器获取IP地址.PPP支持在各种物理类型的点对点串行线路上传输上层协议报文.它具有很多特性,比如支持多协议.提供可选的身份认证 ...

  5. Evolutionary Computing: 5. Evolutionary Strategies(1)

    resource: Evolutionary computing, A.E.Eiben Outline What is Evolution Strategies Introductory Exampl ...

  6. Java学习之Iterator(迭代器)的一般用法 （转）

    迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为"轻量级"对象,因为创建它的代价 ...

  7. poll()函数的使用

    分类: LINUX poll函数用于监测多个等待事件,若事件未发生,进程睡眠,放弃CPU控制权,若监测的任何一个事件发生,poll将唤醒睡眠的进程,并判断是什么等待事件发生,执行相应的操作.poll函 ...

  8. spring加载hibernate映射文件的几种方式。转自：http://blog.csdn.net/huiwenjie168/article/details/7013618

    在Spring的applicationContext.xml中配置映射文件,通常是在<sessionFactory>这个Bean实例中进行的,若配置的映射文件较少时,可以用sessionF ...

  9. Java—泛型

    泛型是JDK 5 中引入的一个新特性,泛型提供了编译时类型安全检测机制,该机制允许程序员在编译时检测到非法的类型.泛型本质是参数化类型,也就是所操作的数据类型指定为一个参数. 假定我们有这样一个需求: ...

  10. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...