美文网首页
拖拽的对话框

拖拽的对话框

作者: 司马皮砸瓜 | 来源:发表于2018-07-15 21:42 被阅读0次

 //获取超链接,注册点击事件,显示登录框和遮挡层
  my$("link").onclick = function () {
    my$("login").style.display = "block";
    my$("bg").style.display = "block";
  };

  //获取关闭,注册点击事件,隐藏登录框和遮挡层
  my$("closeBtn").onclick = function () {
    my$("login").style.display = "none";
    my$("bg").style.display = "none";
  };

  //按下鼠标,移动鼠标,移动登录框
  my$("title").onmousedown = function (e) {
    //获取此时的可视区域的横坐标-此时登录框距离左侧页面的横坐标
    var spaceX = e.clientX - my$("login").offsetLeft;
    var spaceY = e.clientY - my$("login").offsetTop;
    //移动的事件
    document.onmousemove = function (e) {
      //新的可视区域的横坐标-spaceX====>新的值--->登录框的left属性
      var x = e.clientX - spaceX+250;
      var y = e.clientY - spaceY-140;
      my$("login").style.left = x + "px";
      my$("login").style.top = y + "px";

    }
  };

  document.onmouseup=function () {
    document.onmousemove=null;//当鼠标抬起的时候,把鼠标移动事件干掉
  };

</script>
<script>

  //点击超链接弹出登录框,点击页面的任何位置都可以关闭登录框
  //  my$("link").onclick=function (e) {
  //    my$("login").style.display="block";
  //    //return false;
  //    //e.preventDefault();
  //    //上面的两个是阻止默认事件的
  //    //下面的两个是阻止事件冒泡的
  //    //window.event.cancelBubble=true;
  //    e.stopPropagation();
  //  };
  //  document.onclick=function () {
  //    my$("login").style.display="none";
  //    console.log("隐藏了");
  //  };

相关文章

  • 拖拽的对话框

  • 10-16 测试心得

    测试要求: 点击“发布微博”按钮,显示对话框。 默认是看不到对话框 按住标题可以拖拽 整个 div 点击“取消” ...

  • AndroidTagView 云标签

    介绍 可自定义的标签视图,支持添加标签,点击,长按弹出删除对话框,以及拖拽排序。 Github 类似控件 andr...

  • JS-WEB-API-Day7

    图片跟着鼠标飞(终极版) 案例:拖拽对话框关闭登录框 案例:放大镜显示(终极版) 元素隐藏的不同方式 大量字符串拼...

  • 拖拽操作

    应用: 1.拖拽排序2.拖拽上传3.拖拽裁剪 拖拽流程 确定可拖拽的内容-->开始拖拽-->拖拽过程-->结束拖拽...

  • Axure的使用之轮播图

    1.新建空白页面。 2.在元件库选择“动态面板”拖拽到页面中并命名。 3.双击动态面板出现如下对话框,点击“加”号...

  • Html5 + Css 3 文件拖拽上传功能

    拖拽上传文件功能 拖拽事件 拖拽元素ondrag 应用于拖拽元素,整个拖拽过程都会调用ondragstart应用...

  • 拖拽上传

    拖拽事件 拖拽元素ondrag 应用于拖拽元素,整个拖拽过程都会调用ondragstart应用于拖拽元素,...

  • 跟我一起学QT_QT标准对话框_字体选择框

    标准对话框 QT的标准对话框分为以下几种 颜色对话框 文件对话框 字体对话框 输入对话框 消息对话框 进度对话框 ...

  • 跟我一起学QT_QT标准对话框_颜色选择框

    标准对话框 QT的标准对话框分为以下几种 颜色对话框 文件对话框 字体对话框 输入对话框 消息对话框 进度对话框 ...

网友评论

      本文标题:拖拽的对话框

      本文链接:https://www.haomeiwen.com/subject/rhlmpftx.html