Question

我在某些元素上使用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;
}

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

Answer 1

我更新了小提琴：http://jsfiddle.net/cL5kh/9/

看看这一节，我使用scroll（）和scrollTop（）函数重新定位调整大小图标：

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

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

1 个答案: