<!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. NPOI的使用Excel模板导出

    private string ExportScMeeting(DataTable source) { string templateFile = Server.MapPath(@"Excel ...

  2. 在 linux 上部署并运行 JavaFX 项目

    环境 redhat 6.4.eclipse安装JavaFX插件 项目详情及代码参见 在linux上配置并创建JavaFX项目 ,该部署即此文章中项目的部署 配置build.fxbuild 生成buil ...

  3. java中String对象的split方法

    在java.lang包中有String.split()方法,返回是一个String[]数组,今天碰到一个自己没注意的问题: 1.特殊分隔符 String str1 = "123|456|78 ...

  4. (47) odoo详细操作手册

    odoo 8 详细操作手册, ERP(Odoo8.0)操作手册-v1.10(陈伟明).pdf 链接: http://pan.baidu.com/s/1hsp0bVQ 密码: r9tt 花了将近9个月时 ...

  5. sql练习记录

    三表关联如果字段为0则表示是散客卡 select a.shop_id as id,b.shop_name,a.balance,a.point,(IF(a.card_type_id<>0,c ...

  6. Sample a balance dataset from imbalance dataset and save it（从不平衡数据中抽取平衡数据，并保存）

    有时我们在实际分类数据挖掘中经常会遇到,类别样本很不均衡,直接使用这种不均衡数据会影响一些模型的分类效果,如logistic regression,SVM等,一种解决办法就是对数据进行均衡采样,这里就 ...

  7. JSON格式化与serialize序列化

    一.JSON格式化 1. JSON是什么 JSON是一种数据的存储格式,用来沟通客户端Javascript和服务端PHP的交互.我们把用PHP生成JSON后的字符串传给前台Javascript,Jav ...

  8. js中转移符

    "<a href='javascript:;' onclick='javascript:changeChannelRuleStatus(\"" + options. ...

  9. 每个部门绩效成绩第二名 sql server 查询 （ 替代 not in ）

    原题: 集团中有多个部门,部门底下有多个员工,求每个部门绩效分数排名第二的人员,数据表结构如下: DEPAR          NAME             SCORE A             ...

  10. chrome 扩展包 postman 的安装

    由于chrome网上应用不能使用.添加扩展程序,需要其他的办法. 1.下载postman安装包.下载地址 2.这一步按照这个下载包中的方法,也可以,可以忽略其错误. 先解压出crx,使用两个办法,使用 ...