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){
        }
      })
    };

    你好!如果你有什么更好的建议或意见,请在评论区留言。感谢你的阅读!
  • 相关阅读:
    11种常用css样式之background学习
    11种常用css样式之开篇文本字体学习
    学习css常用基本层级伪类属性选择器
    学习了解CSS3发展方向和CSS样式与优先级
    常见CSS3选择器和文本字体样式汇总
    简单了解css3样式表写法和优先级
    4——PHP比较&&复制运算符
    虚基类
    string类中getline函数的应用
    string类应用举例
  • 原文地址:https://www.cnblogs.com/YCxiaoyang/p/9244013.html
Copyright © 2011-2022 走看看