带细节的有界可拖动元素

Question

我正在尝试使 div 可拖动并绑定到另一个容器 div（浅黄色）。使用 jquery 和 jquery-UI，我设法使它工作（代码笔项目here）。现在我错过了下一步。

我的可拖动标题 div 上有一个（红色）按钮，它将切换包含其他一些细节的 body div 的可见性。我还希望这些详细信息始终显示在我的容器中。

现在，如果我将我的（橙色）标题 div 拖到其容器底部并打开正文详细信息（金色）div，它将出现在容器外部。有没有办法避免这种情况，因为我希望有可能将我的标题拖到其容器的底部？我在想类似的事情

if(spaceUnderHeaderDiv < detailsDivHeight) { 
  // make detailsDiv to appear on the top of header instead 
}

，所以如果我的标题 div 下没有足够的空间，我会在顶部显示我的 body div，而不是像往常一样显示在底部

Answer 1

我曾希望 .toggle() 与 slide 和特定选项能够正常工作。

$(".elBody").toggle("slide", {
  direction: "down",
  distance: diff
});

其中diff 是从.elHeader 的底边到.container 的底边的像素差。此 jQuery UI 效果与 jQuery .slidetoggle() 的工作方式不同。

我最终做的是类似的，我在发出.slideToggle() 之前调整了height 的值。

工作示例：https://jsfiddle.net/Twisty/9q5wt186/13/

JavaScript

$(function() {
  function detEdgeDiff(el) {
    var par = el.parent();
    var head = $(".elHeader", el);
    // Calc expected bottom
    var elBottom =  el.position().top + head.height() + 200;
    // Calc bottom edge + Margin of Parent
    var parBottom = par.position().top + par.height() + 20;
    // Default height
    var results = 200;
    if (elBottom > parBottom) {
      var diff = Math.round(elBottom - parBottom);
      results = 200 - diff;
    }
    return results;
  }
  var $element = $(".element");
  $element.draggable({
    containment: ".container",
    handle: ".elHeader"
  });

  $(".expand").on("click", function(e) {
    var d = detEdgeDiff($element);
    $(".elBody").css("height", d + "px").slideToggle();
  });
});

希望对您有所帮助。