Javascript 在边框拖放时调整 div 的大小而不添加额外的标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26233180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize a div on border drag and drop without adding extra markup
提问by Anton
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?
我有一个绝对定位的侧面板，我需要通过拖动此边框来更改其宽度。另外我需要在边框悬停时更改光标。是否可以在不添加另一个用于拖动的 div 的情况下执行此操作？
Here is the markup:
这是标记：
#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>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:
我不需要完整的解决方案。A Yes（有文档参考）/No 答案就足够了。我不需要助手的回答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>Again, this is the functionality I want, except I want to remove the extra div.
同样，这是我想要的功能，除了我想删除额外的div.
回答by lucascaro
It is certainly possible to do this without an extra div. Use css and :afterto create the border and change the cursor. Use MouseEvent.offsetXto determine whether to process a click in the element.
当然可以在没有额外 div 的情况下做到这一点。使用 css and:after创建边框并更改光标。使用MouseEvent.offsetX以确定是否要处理的元素的点击。
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 < 4in your click handler:
在您的示例中，您希望单击主 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>回答by Manjunath Siddappa
i hope it may help you
我希望它可以帮助你
<div id="container">
<div id="left_panel"> left content! </div>
<div id="right_panel">
<div id="drag"></div> right content!
</div>
</div>
CSS
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;
});
});
回答by parag
Without jQuery:
没有 jQuery：
<head>
<style>
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;
}
</style>
</head>
<body>
<div id="container">
<div id="left_panel"> left content! </div>
<div id="right_panel">
<div id="drag"></div> right content!
</div>
</div>
<script>
var isResizing = false,
lastDownX = 0;
(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;
lastDownX = e.clientX;
};
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;
}
})();
</script>
</body>
