我有一个绝对定位的侧面板,我需要通过拖动这个边框来改变它的宽度.此外,我需要更改边框悬停上的光标.是否可以在不添加另一个div进行拖动的情况下执行此操作？
这是标记:
#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>我不需要完整的解决方案.是(带文档参考)/没有答案就足够了.我不需要助手的回答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: …是否有角度材料的指令来调整sidenav的大小？
有一个sidenav显示客户端列表,右侧窗格显示客户端的详细信息.我想在它们之间添加一个调整大小栏.
我使用了以下内容
http://plnkr.co/edit/Zi2f0EPxmtEUmdoFR63B?p=preview
我在下面找到了
我尝试按照上面的plunker示例,但sidenav从未调整过大小.右侧窗格向右移动,但左侧窗格保持不变.
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" id="sidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-list class="sideBar">
<md-item ng-repeat="client in data">
<md-item-content>
<md-button ng-click="selectClient(client);" >
{{client.name}}
</md-button>
</md-item-content>
</md-item>
</md-list>
</md-sidenav>
<div id="sidebar-resizer"
resizer="vertical"
resizer-width="6"
resizer-left="#sidenav"
resizer-right="#primary-col"
resizer-max="400">
</div>
<!-- viewport column -->
<div layout="column" flex class="content-wrapper" id="primary-col">
<div id="viewPort" ng-view></div>
</div>
</div>
谢谢
javascript css angularjs angularjs-directive angular-material
我有一个div
<div id="preview">
</div>
有没有办法将click事件绑定到div的左边框？
提前致谢.