html边框拖拽,在边框上拖放时调整div的大小，而无需添加额外的标记

我有一个绝对定位的侧面板，我需要通过拖动此边框来更改其宽度。另外，我需要更改边框悬停时的光标。是否可以在不添加另一个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。