带细节的有界可拖动元素

Posted 2023-05-08

【中文标题】带细节的有界可拖动元素

【英文标题】：Bounded Draggable element with details

【发布时间】：2019-06-27 07:33:44

【问题描述】：

我正在尝试使 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，而不是像往常一样显示在底部

【问题讨论】：

欢迎来到 Stack Overflow。请提供一个最小的、完整的和可验证的例子：***.com/help/mcve您可能还喜欢游览：***.com/tour

我想你想调整容器的overflow 样式。这样，当按钮被点击时，元素就会从视图中隐藏起来。

如果用jQuery UI切换到slide效果，可以设置距离。 api.jqueryui.com/slide-effect

【参考方案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();
  );
);

希望对您有所帮助。

【讨论】：

抱歉耽误了我的回复，感谢您的回复！虽然现在我的 .elBody 元素确实没有溢出，但我想要实现的目标之一是 .elBody 必须是可协作的并且在容器内始终可见。我不想隐藏内容，我想改变它的显示方式以适应容器。基本上，我想要达到的最终结果，就是拖拽整个.element，但是绑定到它的容器只有我的.elHeader，而.elBody的显示必须根据.elHeader的位置来管理

@Bebiuz 这个问题有点奇怪，你在整个元素上使用了containement。这将元素的一部分保留在容器中并且不允许溢出。基本上，你会想要包含一些元素，但不是全部。我怀疑修改后的drag 将不得不在这里提供帮助。