js拖拽效果

时间：2022-08-31 08:06:36
 <!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&period;js实现原生js拖拽效果及思考

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

  2. 再谈React&period;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实现漂亮的窗口拖拽效果&lpar;可改变大小、最大化、最小化、关闭&rpar;

    转自<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. char 型二维数组

    char FutureFunc[][16] = {"XMA","ZIG","PEAK","PEAKBARS",&quot ...

  2. 【原】git如何删除本地和远程的仓库

    今天操作git时遇到一个小问题:如何删除本地和远程的仓库,在网上巴拉一番解决了这个问题. 方法1: $rm testfile$git add -u $git commit -m "delet ...

  3. Selenium2&plus;python 常用函数汇总

    1. driver = webdriver.Chrome()  --新建实例 2.driver.find_element_by_id("username") ---通过标签属性id ...

  4. ASP&period;Net 获取服务器信息

    1: Response.Write("服务器机器名:" + Server.MachineName); 2: Response.Write("<br/>&quo ...

  5. Oracle 数据库表同步方法浅议

    总结一下Oracle数据库表级别的复制同步 一.通过触发器进行表的复制 原理,是监听表上都某一字段进行的DML操作,然后得到DML操作的数据,重新在另一个表上执行DML操作. 优点: 简单,编写一个触 ...

  6. Python：数字

    一.数字简介 数字可以直接访问,是不可更改并且不可分割的原子类型,这些在标准类型的分类中都谈到了.不可更改意味着变更数字值的实质是新对象的创建.当然,这些对于程序员来说都是透明的,不需过多考虑. 1. ...

  7. mount&colon; unknown filesystem type &&num;39&semi;LVM2&lowbar;member&&num;39&semi;解决方案

    系统启动到request_module: runaway loop modprobe binfmt-464c挂起 利用U盘系统,挂载硬盘出现:mount: unknown filesystem typ ...

  8. HTML5 indexedDB数据库的入门学习（一）

    笔者早些时间看过web sql database,但是不再维护和支持,所以最近初步学习了一下indexedDB数据库,首先indexedDB(简称IDB)和web sql database有很大的差别 ...

  9. Php的安装与配置

    PHP的安装 php不需要安装,只是一个软件包,在Apache启动的过程中加载即可 PHP的配置 php是一个软件包,只需要在apache启动过程中加载即可,Php对于apache是一个功能模块. 测 ...

  10. Hibernate各保存方法之间的差 &lpar;save&comma;persist&comma;update&comma;saveOrUpdte&comma;merge&comma;flush&comma;lock&rpar;等一下

    hibernate保存  hibernate要保存的目的是提供一个方法,多.它们之间有许多不同之处,点击此处详细说明.使得差: 一.预赛: 在所有.阐释.供hibernate,,transient.p ...

相关文章