Question

我为显示模式窗口创建了小脚本，然后调整窗口大小并移动

脚本可以在此处进行测试： https://jsfiddle.net/5ysja6tn/4/

我遇到的第一个问题是，当尝试调整窗口大小时，光标也不会跟随拐角并分开，我的问题是关于如何在调整窗口大小时如何将光标留在拐角处

其他事情是因为我严重使用了css flex属性，因为在调整窗口大小时，橙色的容器不会改变高度，我尝试了不同的方法，但是我无法使此容器获得必要的高度调整大小时

最后一个问题是关于是否使用css resize属性是一个好主意，我使用是因为我在使用jquery UI时遇到很多问题，而且我不知道是否存在使用jquery进行调整大小的简便方法，我并不想真正使用插件，因为最终会给我其他脚本带来问题

这是我的代码：

"use strict"

function move(idd) {
  $('' + idd + '').on({
    mousedown: function(e) {
      $(window).data({
        down: true,
        oX: e.offsetX,
        oY: e.offsetY,
        el: this
      })
    },
    mouseup: function(e) {
      $(window).data('down', false)
    },
  })
  $(window).on({
    mousemove: function(e) {
      var data = $(window).data()
      if (data.down) {
        $(data.el).css({
          left: e.clientX - data.oX,
          top: e.clientY - data.oY
        });
      }
    },
  })
}

function res(idd) {
  jQuery("" + idd).css("resize", "both");
  jQuery("" + idd).css("overflow", "hidden");
}

#dragg {
  position: relative;
  background-color: red;
  width: 200px;
  height: 300px;
  display: flex;
  flex-direction: column;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="dragg">
  <div id="header_win" onmouseover="move('#dragg');" style="position:relative;width:100%;height:35px;background-color:grey;">Mover</div>
  <div style="position:relative;width:100%;height:300px;margin:auto;background-color:orange;display:flex;flex-direction:column;">
    Test<br>Test<br>Test<br>Test<br>Test<br>
  </div>
  <div id="footer_win" onmouseover="res('#dragg');" style="position:relative;width:100%;height:20px;bottom:0px;background-color:green;">Resize</div>
</div>

非常感谢您的帮助

css调整大小功能和调整大小时的光标位置

0 个答案: