我有一个绝对定位的侧面板,我需要通过拖动这个边框来改变它的宽度。此外,我需要更改边框悬停上的光标。是否可以在不添加另一个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>
&#13;
我不需要完整的解决方案。是(带文档参考)/没有答案就足够了。我不需要帮助者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);
&#13;
#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;
}
&#13;
<body>
<div id="right_panel">
<div id="resize"></div>
</div>
</body>
&#13;
同样,这是我想要的功能,除了我想删除额外的div
。
答案 0 :(得分:18)
我希望它可以帮到你
<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;
});
});
答案 1 :(得分:7)
当然可以在没有额外的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>
答案 2 :(得分:5)
没有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>