与细节界拖动元素

Question

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

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

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

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

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

Answer 1

我曾希望与.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();
  });
});

希望帮助。