Dynamically update containment

[apfelbox]

Hi,

I am currently implementing an application that is supposed to allow the user to drag&drop elements in a container. Left, right and top should be a fixed containment, but the containment container should automatically grow in the bottom direction, if I move the draggable near the edge.

I got the growing of the containment area implemented, but as draggabilly loads the containment bounding box once on pickup, the not-enlarged containment is still active.

Is there a way to tell draggabilly that it should recalculate the containment bounding box?

[desandro]

Thanks for reporting this issue. To better help understand the issue, can you provide a reduced test case? You can fork one of the CodePens from the docs to get started.

[apfelbox]

I have created a small example: http://codepen.io/anon/pen/aOQeXw

What I am trying to do is to dynamically expand the containment container. You can see my implementation in the CodePen.

But now I need to tell draggabilly to refresh the bounding box of the containment, as you can see in the example: I can't move the draggable further down, although the containment has resized.

Does this help you?

[desandro]

Thanks for that! Looks like we need to update the container size. There's no method to do this, but we can add one. See demo http://codepen.io/desandro/pen/eNbPoy

Draggabilly.prototype.setContainerSize = function() {
  var containment = this.options.containment;
    // use element if element
  var container = isElement( containment ) ? containment :
    // fallback to querySelector if string
    typeof containment == 'string' ? document.querySelector( containment ) :
    // otherwise just `true`, use the parent
    this.element.parentNode;

  this.containerSize = getSize( container );
};

function isElement( obj ) {
  return obj instanceof HTMLElement;
}

Then we can use setContainerSize method when resizing the container.

// jQuery
$draggable.draggabilly('setContainerSize')
// vanilla JS
draggie.setContainerSize()

[apfelbox]

@desandro thank you very much, it works. You can think about adding it to core.

Either way, as we now have a proper way to implement that, I will close this issue.

[mikila85]

@desandro , this does not work anymore, can you help making it work on current version?