我正在尝试制作可以拖动和调整大小并包装任意 HTML 格式内容的对话框。我在一个指令中使用 JQLite 调整大小:在底 Angular 的一个 div 上按下鼠标(在我的 Plunker http://plnkr.co/edit/ABQd8ZGVGeRlNWI6xIGy?p=preview 中突出显示为蓝色)并拖动鼠标以调整对话框的大小。
但是，当您滚动时，调整大小的 div 会随着文本的其余部分向上移动，而不是留在底 Angular 。其他 stackoverflow 用户也遇到过这个问题，但他们使用的是 jQueryUI 而不是 Angular，我不确定如何在 Angular 中修复它。我有一种感觉，这将归结为一些简单的 HTML/CSS 重新格式化，但我不确定该怎么做。任何帮助表示赞赏! plunker 在上面，这里是一些相关的代码:
dialog.html:(对话框外观的代码)
<html>
<link href='dialog.css' rel='stylesheet' type='text/css'/>
<body>
<div class='dialog' ng-style="{'width': model.width+'px', 'height': model.height+'px', 'top':model.top+'px', 'left':model.left+'px', 'z-index': model.zindex}"
ng-mousedown='zorder()'>
<span class='topbar'>
<button class='minimize' ng-click="minimize()"> _ </button>
</span>
<div class='content'>
<ng-include src=model.template></ng-include>
</div>
<div class='drag'></div> //the resize div
</div>
</body>
</html>
对话框.css:
.dialog {
border: 1px black solid;
display: block;
position: absolute;
background-color: white;
overflow: auto;
}
.topbar {
border: 1px lightgrey solid;
background-color: grey;
display: block;
}
.topbar:hover {
cursor: pointer;
}
.drag {
height:10px;
width: 10px;
display: block;
position: absolute;
bottom: 0;
right: 0;
background-color: blue;
}
.drag:hover {
cursor: nwse-resize;
}
.content {
overflow: scroll;
margin: 11px;
}
最佳答案
试试这个:
.content {
position: absolute;
top: 26px; /** so it will be under the minimize bar **/
right: 0;
bottom: 0; /** or 10px if you want it above the resize area **/
left: 0;
overflow: auto;
margin: 11px;
}
这样，内容区域将可以滚动，而对话框的其余部分将保持固定。
关于jquery - 滚动阻止在 AngularJS 中调整 div 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31661013/