可以拖动的DIV

  • Q2_181345
    了解作者
  • 1.1KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-02 03:27
    上传日期
NULL 博文链接:https://penghuaiyi.iteye.com/blog/1066384
可以拖动的DIV.rar
  • 可以拖动的DIV
  • test.html
    2.8KB
内容介绍
<html> <head> <title>DragDiv</title> <script type="text/javascript"> window.onload = function() { window.document.onmousedown = function(e){ startDrag(e); }; window.document.onmousemove = function(e){ moveDrag(e); }; window.document.onmouseup = function(e) { stopDrag(e); }; }; </script> </head> <body> <div id="dragobj1" style="width:20%;height:60px;background-color:green;position:absolute;left:30px;top:40px;cursor:hand;"> </div> <div id="dragobj2" style="width:20%;height:60px;background-color:red;position:absolute;left:70px;top:90px;cursor:hand;"> </div> </body> </html> <script> /** *@author:bruce bao *功能:拖拽DOM ELEMENT对象,@version1 */ /** *全局变量: *oldMouseX:鼠标在事件触发时的X坐标,初始化为0 *oldMouseY:鼠标在事件触发时的Y坐标,初始化为0 *dragObjStatus:是否执行拖拽动作的flag,初始化为0,0-不执行,1-执行 *dragObj:拖拽的DOM ELEMENT,初始化为null */ var oldMouseX = 0; var oldMouseY = 0; var dragObjStatus = 0; var dragObj = null; /** *初始化拖拽的全局变量 */ function startDrag(event) { var e = window.event || event; //得到触发事件的源对象,也就是要拖拽的对象 if(!e.target) { e.target = e.srcElement; } //如果事件的源对象不是body,初始化全局变量,为拖拽做好准备,否则就还原全局变量为默认值 if(e.target.tagName.toLowerCase() != 'body') { dragObjStatus = 1; dragObj = e.target; oldMouseX = parseInt(e.clientX)-parseInt(dragObj.style.left); oldMouseY = parseInt(e.clientY)-parseInt(dragObj.style.top); } else { oldMouseX = 0; oldMouseY = 0; dragObjStatus = 0; dragObj = null; } } /** *完成拖拽 */ function stopDrag(event) { var e = window.event || event; if(dragObjStatus == 1) { if(dragObj) { dragObj.style.left=parseInt(e.clientX)-parseInt(oldMouseX); dragObj.style.top=parseInt(e.clientY)-parseInt(oldMouseY); } //还原全局变量为默认值 oldMouseX = 0; oldMouseY = 0; dragObjStatus = 0; dragObj = null; } } function moveDrag(event){ var e = event||window.event; if(dragObjStatus==1){ if(dragObj){ dragObj.style.left=parseInt(e.clientX)-parseInt(oldMouseX); dragObj.style.top=parseInt(e.clientY)-parseInt(oldMouseY); } } } </script>
评论
    相关推荐
    • CasseBrique:https
      CasseBrique:https
    • plaintextoffenders:https
      纯文字罪犯 向报告的域的公开列表
    • 使用socket post 数据到httphttps
      使用socket post 数据到httphttps
    • nodejs http-server开启https的证书
      https证书文件,nodejs http-server开启https的证书,可以直接在本地启动https的协议,方便部署和使用。
    • http https 切换
      http https切换代码,能够实现网站在传输信息的过程中不易遭人盗取
    • Http2Https-crx插件
      将书签中的http转换为https 害怕用https书签替换旧的http书签? 随着许多网站迁移到https,旧的http书签使星标图像为空。 搜索并转换为https! ****************************************************** ***********...
    • LocomotiveCMS https to http-crx插件
      语言:English 将登录网址从https替换为http以进行开发 此扩展程序供使用机车cms开发应用程序时供个人使用。 为了易于在开发模式下使用,此扩展程序将https登录网址替换为http
    • http:https的镜像
      框架HTTP
    • CookieIsolator:分离 HTTPHTTPS cookie
      松散隔离:HTTP cookie 只能在 HTTP 通道中发送,而 HTTPS cookie 可以在 HTTP(不带安全标志)和 HTTPS 通道中发送。 严格隔离:HTTP cookie 和 HTTPS cookie 只能分别在 HTTPHTTPS 通道中发送。 Ext Secure...
    • https协议
      NULL 博文链接:https://willwen.iteye.com/blog/1988199