在边框上拖放时调整div的大小，而无需添加额外的标记
我有一个绝对定位的侧面板，我需要通过拖动此边框来更改其宽度。另外，我需要更改边框悬停时的光标。是否可以在不添加另一个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>
我不需要完整的解决方案。是（有文档参考）/否答案就足够了。我不需要帮手的回答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。
问题答案：
当然，无需额外的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: w-resize;
}
<body>
<div id="right_panel"></div>
</body>
-
本文向大家介绍jquery实现拖拽调整Div大小，包括了jquery实现拖拽调整Div大小的使用技巧和注意事项，需要的朋友参考一下 今天写了一天这个jquery插件： 可以实现对div进行拖拽来调整大小的功能。 记录一下今天的劳动成果，可能会有很多不成熟的地方，欢迎大家来指正，谢谢！ 以上就是本文的全部内容了，希望大家能够喜欢。
-
问题内容： 我有一个div标签， 我想在上面添加一个小三角形。 注意：我希望我的div标签带有某种颜色的边框，而div主体具有另一种颜色。说，我的div背景将为白色，边框应为蓝色。请看这个。 问题答案： 使用位于带有指针和阴影的初始框，您可以对其进行重新样式设置以形成所需的形状： 如果您需要将箭头进一步向右移动，则只需使用for 和
-
问题内容： 我有一行要在悬停时应用背景突出显示。 然而，随着边境增加了1px的 额外 的元素，它使得“移动”。我在这里如何补偿以上动作（不使用背景图片）？ 问题答案： 您可以使边框透明。这样，它就存在了，但却是不可见的，因此它不会推动任何事情： 如果您的元素具有指定的和/或，则还可以使用，因为此框模型在计算出的大小中包括了填充和边框宽度，例如：
-
这是我的shape_two文件，我把它放进了我的drawable文件夹。 我的问题是，当我在我的ImageViews上绘制形状时，它会被重新调整大小（改变高度和宽度）。我有不同大小的imageView和我想使用单一形状的xml绘制边框，我的imageView大小不应该改变，而这样做。谁都可以告诉我如何实现它。 在搜索了很多东西后，我才知道，我不能对它执行位图操作来根据形状重新调整它的大小，因为xm
-
我想有一个div，是全屏幕的移动查看端口有一个边界三角形，我已经这样做了桌面屏幕在工程中，但当我应用相同的属性和调整的数字，我确实得到了一些接近我想要的 下面是HTML，这里有一个代码笔 一个有效的是UL的tri类，这将在桌面屏幕上工作，我现在用内联可见性隐藏了它：隐藏 以下是两种情况下的相应样式 我使用的是引导导航，我覆盖了导航栏折叠这样的响应风格，因为我不需要它们。 要查看的类是我用于全屏的类
-
问题内容： 我需要让用户向我的JFrame中添加更多文本字段，以便一旦框架的大小超过其原始值，滚动窗格就会介入。由于我无法将JScrollPane添加到JFrame中以启用滚动，因此我决定将JPanel置于JFrame并将JPanel对象传递到JScrollPane构造函数。滚动现在可以正常工作，但是直到到达JPanel的边界为止。问题是JPanel的大小保持不变，并且不会动态扩展。发生的是我代码