Измените размер элемента div при перетаскивании границы без добавления дополнительной разметки. ⇐ CSS

[Anonymous]

У меня есть боковая панель с абсолютным позиционированием, и мне нужно изменить ее ширину, перетащив эту границу. Также мне нужно изменить курсор при наведении границы. Можно ли это сделать, не добавляя еще один div для перетаскивания?

Вот разметка:

Код: Выделить всё

#right_panel {
position: absolute;
border-left: solid 3px #ccc;
width: 100px;
height: 100%;
right: 0;
background-color: #f0f0f0;
}

Код: Выделить всё

Мне не нужно полное решение. Ответа Да (со ссылкой на документацию)/Нет достаточно. Мне не нужен ответ с помощью вспомогательного 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;
}

Код: Выделить всё

Опять же, это та функциональность, которую я хочу, но я хочу удалить лишний div.

Подробнее здесь: https://stackoverflow.com/questions/262 ... tra-markup