我在某些元素上使用JQuery UI Draggable和Resizable，但是有时内容对于该元素来说太大了，我希望它滚动。
无论您在何处拖动或调整大小，我都可以通过H3元素将其保持在适当的位置上来达到预期的效果（尽管有关如何使其不覆盖滚动条的任何提示都非常棒！）。
但是，当尝试在可拖动和可调整大小的ui元素上执行此操作时，它们将转到整个文档窗口（据我了解，这是预期的Web行为）。我在我的小提琴上用蓝色背景注释了这个
基本上，当您向下/向上滚动时，我希望拖动和调整大小手柄保持在右下角，但似乎无法实现。
看到这个：
$('.panel').each(function() {
$(this).draggable({
handle: 'h3',
containment: 'parent',
snap: true
});
$(this).resizable({
containment: 'parent',
minHeight: 100,
minWidth: 200
});
// Make the heading fixed and full width
var h3 = $(this).children('h3');
var content = $(this).children('.panelcontent');
h3.width(h3.width());
h3.css('position', 'fixed');
content.css('margin-top', h3.outerHeight(true) + 'px');
$(this).on('resize', function(event, ui) {
var me = $(this);
var myh3 = me.children('h3');
myh3.outerWidth(me.innerWidth());
});
});html,
body {
height: 90%;
width: 90%;
}
body {
font-size: 62.5%
}
#area {
width: 100%;
height: 100%;
border: 1px solid #000;
position: relative;
}
.panel {
width: 200px;
height: 100px;
background-color: #ccc;
overflow: auto;
position: absolute;
}
h3 {
background-color: #ff6600;
cursor: move;
margin: 0;
font-size: 1.5em;
padding: 5px;
}
.panelcontent {
padding: 5px;
font-size: 1.1em;
}
#panel2 {
left: 50%;
top: 50%;
}
#panel2 .ui-resizable-handle {
position: fixed;
background-color: rgba(0, 0, 255, 0.5);
}
.ui-resizable-e {
right: 0 !important;
}
.ui-resizable-s {
bottom: 0 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="area">
<div id="panel1" class="panel">
<h3> Panel 1 </h3>
<div class="panelcontent"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nibh in tellus auctor feugiat rutrum vitae quam. Morbi sodales augue nec tortor suscipit dignissim. Curabitur orci justo, consequat pulvinar eleifend et, fringilla nec nisi. Curabitur
adipiscing adipiscing varius. </div>
</div>
<div id="panel2" class="panel">
<h3> Panel 2 </h3>
<div class="panelcontent"> Donec mollis nulla nec dolor sagittis malesuada. Proin a tellus dui. Donec eleifend ipsum at justo vehicula tempus. Proin convallis ullamcorper nibh, sit amet viverra quam aliquam a. Nullam mollis pulvinar tempus. Nulla facilisi. Phasellus eget mi
varius, sollicitudin lorem ac, hendrerit mi. </div>
</div>
</div>如果将此CSS添加到小提琴中：
#panel2 .ui-resizable-se {
right: auto;
bottom: auto;
}
当您拖动它时，它的确会使调整大小处理程序随面板一起移动，但是它不在正确的位置...
我更新了小提琴：http : //jsfiddle.net/cL5kh/9/
看一下本节，在这里我使用scroll（）和scrollTop（）函数来调整大小图标的位置：
$('.panel').scroll(function(){
var fromTop = $('.panel').scrollTop();
$(this).find('.ui-resizable-se').css({
marginBottom: '-'+fromTop+'px'
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句