Verändern Sie die Größe eines Div durch Ziehen und Ablegen am Rand, ohne zusätzliches Markup hinzuzufügen
Ich habe eine absolut positionierte Seitenwand und muss ihre Breite ändern, indem ich diesen Rand ziehe. Außerdem muss ich den Cursor beim Hover ändern. Ist es möglich, dies zu tun, ohne ein weiteres Div zum Ziehen hinzuzufügen?
Hier ist das 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>Ich brauche keine vollständige Lösung. Eine Ja (mit Dokumentationsverweis) / Nein Antwort ist ausreichend. Ich brauche keine Antwort mit einem Helferdiv. Ich habe schon eine
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, das ist die Funktionalität, die ich möchte, außer ich möchte das zusätzliche @ entferndiv.