zoukankan      html  css  js  c++  java
  • 弹窗拖动功能

    html:

    <div style="position: absolute; 200px;height: 200px;border:1px solid #333">
      <div class="tag"style="height: 30px;border-bottom: 1px solid #333;"></div>
    </div>

    javascript:

    依赖JQ

    Drag('.tag');

    function Drag(className){
      $(className).css({'cursor': 'all-scroll'})
      $(className).mousedown(function(e){
        var that = this;
    // $(that).parent().css({'position': 'absolute'})
        var w = $(that).parent()[0].offsetLeft;
        var h = $(that).parent()[0].offsetTop;
        var w1 = e.screenX;
        var h1 = e.screenY;
        document.onmousemove = function(e1){
          var w2 = e1.screenX;
          var h2 = e1.screenY;
          var new_w = w + (w2 - w1);
          var new_h = h + (h2 - h1);
          new_w < 0 ? new_w = 0 : new_w;
          new_w > ($(document).width() - ($(that).parent().width() + 2)) ? new_w = $(document).width() - ($(that).parent().width() + 2) : new_w;
          new_h < 0 ? new_h = 0 : new_h;
          new_h > ($(document).height() - ($(that).parent().height() + 2)) ? new_h = $(document).height() - ($(that).parent().height() + 2) : new_h;
          $(that).parent().offset({left: new_w, top: new_h})
        }
      })
      $(className).mouseup(function(e){
        document.onmousemove = function(e1){
        }
      })
    };

    你好!如果你有什么更好的建议或意见,请在评论区留言。感谢你的阅读!
  • 相关阅读:
    九九乘法表
    计算器界面
    3.2封装的日期类
    杨辉三角
    100以内的素数
    九九 乘法表
    七、logging模块
    六、MySQLdb 模块
    四、浏览器运行模式
    五、configparser模块
  • 原文地址:https://www.cnblogs.com/YCxiaoyang/p/9244013.html
Copyright © 2011-2022 走看看