Redimensione uma div ao arrastar e soltar bordas sem adicionar marcações extras
Eu tenho um painel lateral absolutamente posicionado e preciso alterar sua largura arrastando essa borda. Também preciso alterar o cursor na borda do mouse. É possível fazer isso sem adicionar outra div para arrastar?
Aqui está a marcação:
#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>Não preciso de uma solução completa. R Sim (com referência à documentação) / Não, resposta é suficiente. Eu não preciso de uma resposta com um ajudantediv. Eu já tenho um:
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>Novamente, esta é a funcionalidade que eu quero, exceto que eu quero remover o extradiv.