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

Autoresize parent container with drag and drop

本文关键字：调整 拖放      更新时间：2023-09-26

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

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

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

});

杰斯菲德尔

在同一selector中绑定事件。

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

请参阅您编辑的小提琴。

编辑：

使用两个div 上的 containment: parent 选项来约束移动，就像在这个div 中一样。

编辑2：

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

编辑3：

这最后一个小提琴应该符合您的所有要求。我在评论中拿了你的小提琴并对其进行了编辑。

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

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

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

默认情况下提供调整大小事件。

检查这个小提琴

相关文章：