jquery - 绝对位置元素内的固定位置元素

Question

我在某些元素上使用 JQuery UI Draggable 和 Resizable，但有时内容对于元素来说太大了，我希望它滚动。

我已经成功地使用 H3 元素实现了预期的结果，因为无论您将其拖动到何处或调整大小，它都会保持在原位(尽管有关如何使其不覆盖滚动条的任何提示都很棒!)。

然而，当尝试在可拖动和可调整大小的 ui 元素上执行此操作时，它们会进入整个文档窗口(我理解的预期网络行为)。我在蓝色背景的 fiddle 上对此进行了注释

基本上，当您向下/向上滚动时，我希望拖动和调整大小的 handle 保持在右下角，但我似乎无法实现。

看这个:

$('.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 添加到 fiddle 中:

#panel2 .ui-resizable-se {
   right: auto;
   bottom: auto;
}

当您拖动面板时，它确实使调整大小处理程序随面板一起移动，但它不在正确的位置...

Answer 1

我更新了 fiddle :http://jsfiddle.net/cL5kh/9/

看看这一部分，我在其中使用 scroll() 和 scrollTop() 函数来重新定位调整大小图标:

    $('.panel').scroll(function(){
      var fromTop = $('.panel').scrollTop();
      $(this).find('.ui-resizable-se').css({
        marginBottom: '-'+fromTop+'px'
      });
    });