在不添加额外标记的情况下，在边框拖放时调整 div 的大小答案

【问题标题】：Resize a div on border drag and drop without adding extra markup在不添加额外标记的情况下，在边框拖放时调整 div 的大小
【发布时间】：2021-10-06 17:07:45
【问题描述】：

我有一个绝对定位的侧面板，我需要通过拖动此边框来更改其宽度。我还需要在边框悬停时更改光标。是否可以在不添加另一个 div 进行拖动的情况下执行此操作？

这里是标记：

#right_panel {
    position: absolute;
    border-left: solid 3px #ccc;
    width: 100px;
    height: 100%;
    right: 0;
    background-color: #f0f0f0;
}

<body>
    <div id="right_panel"></div>
</body>

我不需要完整的解决方案。 A 是（有文档参考）/否回答就足够了。我不需要帮助者div 的答案。我已经有一个了：

var m_pos;
function resize(e){
    var parent = resize_el.parentNode;
    var dx = m_pos - e.x;
    m_pos = e.x;
    parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
}

var resize_el = document.getElementById("resize");
resize_el.addEventListener("mousedown", function(e){
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
}, false);
document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);

#right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0f0;
}

#resize {
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: w-resize;
}

<body>
    <div id="right_panel">
        <div id="resize"></div>
    </div>
</body>

这也是我想要的功能，只是我想删除多余的div。

【问题讨论】：

我假设您的意思是“拖动”。您是否有任何 Javascript 或您要求我们为您编写它？
至少显示一些你已经尝试过但没有工作的代码
我在问它是否可能以及一些建议。我不需要解决这个问题，因为我已经有了另一个 div 的解决方案，用于拖动和调整父 div 的大小。我只想使标记更清洁。这是另一个 div 的解决方案：jsfiddle.net/kxr96dzg/1 抱歉。英语不是我的母语。
我提供了我的代码。你现在可以帮忙吗？
@Anton 万一你错过了，我添加了一个可能对你有用的答案（有点晚，但我希望它有帮助！） -- stackoverflow.com/a/53220241/428486

标签： javascript html css

【解决方案1】：

当然可以在没有额外 div 的情况下做到这一点。使用 css 和 ::after 创建边框并更改光标。使用MouseEvent.offsetX判断是否处理元素中的点击。

在您的示例中，您希望单击主 div，但仅在前 4 个像素上。您可以通过在点击处理程序中检查 e.offsetX < 4 来做到这一点：

const BORDER_SIZE = 4;
const panel = document.getElementById("right_panel");

let m_pos;
function resize(e){
  const dx = m_pos - e.x;
  m_pos = e.x;
  panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";
}

panel.addEventListener("mousedown", function(e){
  if (e.offsetX < BORDER_SIZE) {
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
  }
}, false);

document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);

#right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0ff;
}

#right_panel::after {
    content: '';
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
}

<body>
    <div id="right_panel"></div>
</body>

【讨论】：

如何将resize() 限制在视口的某个百分比？
这对我来说在 Firefox 上运行良好，但在 Chrome 上，当右侧面板变得非常窄时，它开始变得疯狂——面板缩小的速度比我移动鼠标的速度更快。这是因为我使用的是 flexbox，而 Chrome 并没有一直尊重flex-shrink: 0。为了解决这个问题，我将包含getComputedStyle 的行更改为：panel.style.width = (parseInt(panel.style.width) + dx) + 'px';。
还有一点，panel.style.width 可能不是数字（例如可能是 ''），因此您应该检查并回退到 getComputedStyle 如上所述。第一次调用 resize 函数时，它将回退到 getComputedStyle，但在所有其他时间，它将使用 panel.style.width。

【解决方案2】：

希望对你有帮助

http://jsfiddle.net/T4St6/82/

<div id="container">
    <div id="left_panel"> left content! </div>
    <div id="right_panel">
        <div id="drag"></div> right content!
    </div>
</div>

CSS

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;

}
 #left_panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 100px;
    background: grey;
}

#right_panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    color:#fff;
    background: black;
}
 #drag {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: w-resize;
}

JQUERY

var isResizing = false,
    lastDownX = 0;

$(function () {
    var container = $('#container'),
        left = $('#left_panel'),
        right = $('#right_panel'),
        handle = $('#drag');

    handle.on('mousedown', function (e) {
        isResizing = true;
        lastDownX = e.clientX;
    });

    $(document).on('mousemove', function (e) {
        // we don't want to do anything if we aren't resizing.
        if (!isResizing) 
            return;

        var offsetRight = container.width() - (e.clientX - container.offset().left);

        left.css('right', offsetRight);
        right.css('width', offsetRight);
    }).on('mouseup', function (e) {
        // stop resizing
        isResizing = false;
    });
});

【讨论】：

谢谢。这是一个可行的解决方案，但我正在尝试在没有用于拖动的辅助 div 的情况下执行此操作。
在 mousemove 回调的末尾添加“return false”以防止在 div 中选择文本。
这在引导程序中也可行吗？
@PirateApp 你能解释一下，你想实现什么？你想使用 bootstrap.css 吗？
@PirateApp 是的，这是可能的，您需要找到合适的引导 css 类，以及混合类。

【解决方案3】：

没有 jQuery：

var isResizing = false;

(function() {
  var container = document.getElementById("container"),
    left = document.getElementById("left_panel"),
    right = document.getElementById("right_panel"),
    handle = document.getElementById("drag");

  handle.onmousedown = function(e) {
    isResizing = true;
  };

  document.onmousemove = function(e) {
    // we don't want to do anything if we aren't resizing.
    if (!isResizing) {
      return;
    }

    var offsetRight = container.clientWidth - (e.clientX - container.offsetLeft);

    left.style.right = offsetRight + "px";
    right.style.width = offsetRight + "px";
  }

  document.onmouseup = function(e) {
    // stop resizing
    isResizing = false;
  }
})();

body {
  font-family: Helvetica, Arial;
  font-size: 12px;
}

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
}

#left_panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 100px;
  background: grey;
}

#right_panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  color: #fff;
  background: black;
}

#drag {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: w-resize;
}

<body>
  <div id="container">
    <div id="left_panel"> left content! </div>
    <div id="right_panel">
      <div id="drag"></div> right content!
    </div>
  </div>
</body>

【讨论】：

您没有在实际函数中的任何地方使用 lastDownX，顺便说一句。留着也没用。