Question

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

我找到了几个例子，但没有一个是使用多个容器。

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

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

    */



});

Jsfiddle

Answer 1

将事件绑定在同一selector。

中

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

请参阅edited fiddle。

修改

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

编辑2：

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

编辑3 ：

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

Answer 2

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

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

拖动对象时的

mousemove事件，拖动工作后的mouseup事件。

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

选中 fiddle

通过拖放自动调整父容器

2 个答案: