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

Question

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

我找到了几个示例，但其中 none 正在使用多个容器。

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

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

    */



});

Answer 1

在同一 selector 中绑定事件。

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

中查看

编辑：

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

中一样

编辑 2：

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

编辑 3:

This last fiddle 应该符合您的所有要求。我把你的 fiddle 放在了评论中并进行了编辑。

Answer 2

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

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

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

默认提供resize事件。

勾选这个fiddle

Autoresize parent container with drag and drop