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

【问题标题】：Autoresize parent container with drag and drop通过拖放自动调整父容器大小
【发布时间】：2016-04-25 23:07:09
【问题描述】：

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

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

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

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

    */



});

【问题讨论】：

【解决方案1】：

在同一个selector中绑定事件。

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

编辑：

在两个 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 包含我正在寻找的拖动功能，但我不知道如何在我的代码中实现它？