zoukankan      html  css  js  c++  java
  • js 原生_拖动页面元素,松开释放

    嗯哼。不多说,直接上代码了。

    • // 为元素 绑定拖动事件
      function bindDragEvent(obj){
          obj.onmousedown = function(e){
              e = e || window.event;
              
              obj.setCapture && obj.setCapture();    // IE8 及以下 强制捕获下一次单击事件
              
              obj.fixedX = e.clientX - (obj.getBoundingClientRect().left - document.documentElement.clientLeft);
              obj.fixedY = e.clientY - (obj.getBoundingClientRect().top - document.documentElement.clientTop);
              
              document.onmousemove = function(e){
                  e = e || window.event;
                  
                  var x = e.clientX + (document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft);
                  var y = e.clientY + (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop);
                  
                  obj.style.left = x - obj.fixedX + "px";    // 元素在页面中的坐标 = 鼠标在页面中的坐标 - 元素在页面中的坐标
                  obj.style.top = y - obj.fixedY + "px";
              };
              
              document.onmouseup = function(){
                  document.onmousemove = null;    // 解除 鼠标移动div跟随 事件
                  document.onmouseup = null;    // 解除鼠标松开事件
                  obj.releaseCapture && obj.releaseCapture();    // IE8 及以下 解除强制捕获单击事件
              };
              
              return false;
          };
      }
    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    JavaSE 基础 第54节 继承Thread类创建线程
    flask 项目部分业务逻辑
    js生成随机的uuid
    增量式爬虫
    分布式爬虫
    scrapy 的分页爬取 CrawlSpider
    scrapy 请求传参
    scrapy增加爬取效率
    scrapy框架
    模拟登陆request-session
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/9873939.html
Copyright © 2011-2022 走看看