与细节界拖动元素(Bounded Draggable element with details)

我试图让一个div为可拖动和有界到另一个容器的div（浅黄色）。使用jQuery和jQuery UI的，我设法使它工作（代码笔项目在这里）。现在，我错过下一个步骤。

我有我的头可拖动的div A（红色）按钮，将切换包含其他一些细节身体div的可见性。我也想一直显示到我的容器这些细节。

现在，如果我拖我的（橙色）头DIV其容器和开放的机身细节（金）div的底部，会出现外容器。是否有办法避免这种情况，因为我想有拖我的头了它的容器底部的可能性？我想喜欢的东西

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

，因此，如果我没有我的头的div下有足够的空间，我会让我的身体DIV的顶部，而不是显示它像正常底部

我曾希望.toggle()用slide和具体方案是可行的。

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

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

我最终什么事做的是相似的，我调整了height发出前值.slideToggle()

工作实例： 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();
  });
});

希望帮助。