Javascript 如何拖动侧边栏？

我无法向左或向右拖动侧边栏。我想在左右拖动侧边栏时增加和减少侧边栏。当我试图增加或减少侧边栏的宽度时，它保持不变。这方面没有发生变化

var i=0；
$（'#dragbar'）.mousedown（函数（e）{
e、 预防默认值（）；
$（'#mousestatus'）.html（“mousedown”+i++）；
$（文档）.mousemove（函数（e）{
$（'#position'）.html（e.pageX+，'+e.pageY）；
$（'#侧边栏'）.css（“宽度”，e.pageX+2）；
$（'#main'）.css（“左”，e.pageX+2）；
})
console.log（“离开mouseDown”）；
});
$（文档）.mouseup（函数（e）{
$（'#clickevent'）.html（'在另一个mouseUp事件中'+i++）；
$（文档）.unbind（'mousemove'）；
});
#主{
背景颜色：白肋木；
浮动：对；
位置：绝对位置；
顶部：100px；
底部：38px；
右：0；
左：200px；
}
#边栏{
背景色：印度红；
宽度：200px；
浮动：左；
位置：绝对位置；
顶部：100px；
底部：38px；
溢出y：隐藏；
}
#页脚{
背景颜色：淡黄花；
宽度：100%；
高度：38px；
底部：0；
位置：绝对位置；
}
#标题{
背景色：小麦；
宽度：100%；
高度：100px；
}
#德拉巴{
背景色：黑色；
身高：100%；
浮动：对；
宽度：3倍；
光标：col resize；
}

标题
边栏
主要的
页脚
您的脚本存在多个问题

#main
div与
#侧边栏
重叠，因此侧边栏的右边缘不可见，鼠标也无法访问。因此，您的mousedown事件不会触发，因为它从未收到mousedown

这里要做两件事：

为
#main
添加
z-index:1
，为
#侧栏添加
z-index:2

另外，要使拖动手柄div正确匹配，请将其css更改为：

#dragbar {
  background-color: black;
  height: 100%;
  width: 3px;
  cursor: col-resize;
  position: absolute;
  right: 0;
  top: 0;
}

有关工作版本，请参见下面的代码段：


var i=0；
$（'#dragbar'）.mousedown（函数（e）{
e、 预防默认值（）；
$（'#mousestatus'）.html（“mousedown”+i++）；
$（文档）.mousemove（函数（e）{
$（'#position'）.html（e.pageX+，'+e.pageY）；
$（'#侧边栏'）.css（“宽度”，e.pageX+2）；
$（'#main'）.css（“左”，e.pageX+2）；
})
console.log（“离开mouseDown”）；
});
$（文档）.mouseup（函数（e）{
$（'#clickevent'）.html（'在另一个mouseUp事件中'+i++）；
$（文档）.unbind（'mousemove'）；
});
#主{
背景颜色：白肋木；
浮动：对；
位置：绝对位置；
顶部：100px；
底部：38px；
右：0；
左：200px；
z指数：1；
}
#边栏{
背景色：印度红；
宽度：200px；
浮动：左；
位置：绝对位置；
顶部：100px；
底部：38px；
溢出y：隐藏；
z指数：2；
}
#页脚{
背景颜色：淡黄花；
宽度：100%；
高度：38px；
底部：0；
位置：绝对位置；
}
#标题{
背景色：小麦；
宽度：100%；
高度：100px；
}
#德拉巴{
背景色：黑色；
身高：100%；
宽度：3倍；
光标：col resize；
位置：绝对位置；
右：0；
排名：0；
}

标题
边栏
主要的
页脚
Sir还有其他解决方案吗？div没有增加或减少。