通过拖放自动调整父容器大小

Posted 2023-05-08

【中文标题】通过拖放自动调整父容器大小

【英文标题】：Autoresize parent container with drag and drop

【发布时间】：2016-04-25 23:07:09

【问题描述】：

我有三个容器，当内部 div 调整大小时，它们会自动调整大小。现在我想在我的代码中添加拖动功能并保持容器自动调整大小选项，就像在我的示例中一样。如何做到这一点？

我找到了几个示例，但没有一个适用于多个容器。

$(function()
    $('.inner').resizable(
    );

  /* This is not working
      $('.inner').draggable(
    );

    */



);

Jsfiddle

【问题讨论】：

你的意思是你需要内部 div 重新调整大小和拖动山墙？同时？？

是的。调整大小现在可以工作，但我也需要启用拖动选项，以便父 div(class="outer") 像现在一样调整大小。

【参考方案1】：

在同一个selector中绑定事件。

$('.inner').resizable().draggable();

查看您的edited fiddle。

编辑：

在两个 div 上使用 containment: parent 选项来限制移动，如 this one。

编辑 2：

This 应该可以解决您的问题。调整大小时调用控制外部 div 高度的回调函数。

编辑 3：

This last fiddle 应该符合您的所有要求。我在评论中采纳了您的意见并对其进行了编辑。

【讨论】：

谢谢，但父 div(class="outer") 调整大小在您的示例中不起作用。

请看第二把小提琴。

它仍然无法正常工作。在您的小提琴父母（class=outer）中，大小始终相同。在我的原始示例中，如果您调整内部 div 的大小大于父 div ，则父级也会调整大小。

请看小提琴：jsfiddle.net/LakYy/3/.Fiddle 包含我正在寻找的拖动功能，但我不知道如何在我的代码中实现它？

它已关闭，但当我将内部 div 拖到容器外时，容器仍然没有调整大小。请看我之前的评论

【参考方案2】：

当你调用draggable函数时，可拖动对象position属性将设置为absolute，所以你需要编写新的函数来调整大小和拖动。

您可以使用mousemove 和mouseup 事件检测拖动语句。

mousemove 对象拖动时的事件，mouseup 拖动后的事件。

默认提供resize事件。

检查这个fiddle

【讨论】：

谢谢，但如果我将它拖到容器之外。请参阅小提琴：jsfiddle.net/LakYy/3/.Fiddle 包含我正在寻找的拖动功能，但我不知道如何在我的代码中实现它？