使用拖放自动调整父容器大小

Question

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

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

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

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

    */



});

Jsfiddle

- user3189644

---

你的意思是需要同时可调整大小和可拖动的内部div吗？ - Mohammed Alasa'ad

是的，现在可以调整大小，但我还需要启用拖拽选项，以便像现在一样调整父级div（class="outer"）的大小。 - user3189644

Answer 1

在相同的 选择器 中绑定事件。

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

请在您的编辑后的Fiddle中查看。

编辑：

在两个div上使用containment: parent选项来限制移动，就像这个示例一样。

编辑2：

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

编辑3：

这个最新的Fiddle应该符合您的所有要求。我拿了您评论中的fiddle并进行了编辑。

- AlexBay

---

谢谢，但是你的示例中父级div（class="outer"）的调整大小不起作用。 - user3189644

请查看 jsfiddle.net/LakYy/3/。这个 Fiddle 包含了我正在寻找的拖动功能，但我不知道如何将其实现到我的代码中？ - user3189644

很接近了，但当我将内部div拖到容器外时，容器仍未调整大小。请参见我的先前评论。 - user3189644

为什么不呢？给它们不同的ID。 - AlexBay

我认为容器高度是从整个文档高度设置的，这就是为什么它不能与多个容器一起使用的原因。$container.height($document.height() - offset.top - scrollbarSafety); - user3189644

Answer 2

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

您可以使用mousemove和mouseup事件检测拖动语句。 mousemove事件用于在对象拖动时，mouseup事件用于拖动工作完成后。

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

请查看此fiddle。

- blurfx

---

谢谢，但是如果我拖动它，它会超出容器范围。请参见 jsfiddle.net/LakYy/3/。这个 fiddle 包含了我正在寻找的拖动功能，但我不知道如何将其实现到我的代码中？ - user3189644