在边框拖放时调整div的大小，而不添加额外的标记 [英] Resize a div on border drag and drop without adding extra markup
问题描述
我有一个绝对定位的侧面板，我需要通过拖动这个边框来改变它的宽度。此外，我需要更改边框悬停上的光标。是否可以在不添加另一个div进行拖动的情况下执行此操作？
I have an absolute positioned side panel and I need to change its width by dragging this border. Also I need to change cursor on border hover. Is it possible to do this without adding another div for dragging?
以下是标记：
#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>
我不需要完整的解决方案。是（带文档参考）/没有答案就足够了。我不需要帮助 div 的答案。我已经有一个：
I don't need a full solution. A Yes (with documentation reference)/No answer is enough. I don't need an answer with a helper div. I already have one:
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 。
Again, this is the functionality I want, except I want to remove the extra div.
推荐答案
当然可以在没有额外div的情况下做到这一点。使用css和：在之后创建边框并更改光标。使用 MouseEvent.offsetX 确定是否处理元素中的点击。
It is certainly possible to do this without an extra div. Use css and :after to create the border and change the cursor. Use MouseEvent.offsetX to determine whether to process a click in the element.
在您的示例中，您需要点击主div，但仅限于前4个像素。您可以通过检查 e.offsetX<来完成此操作。点击处理程序中有4 ：
In your example, you want a click on the main div, but only on the first 4 pixels. You can do that by checking for e.offsetX < 4 in your click handler:
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: w-resize;
}
<body>
<div id="right_panel"></div>
</body>
这篇关于在边框拖放时调整div的大小，而不添加额外的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
