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

8 浏览
0 Comments

在边框拖放时调整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。

0