contained draggies wont stay in container on container resize

[neuedeutsche]

hello,
i am trying to have a contained drag experience for elements with a possible change of the container size. draggies will ignore that and not stay contained.

initial position is achived with left: 100%; and -30px; on a 30px whide box.
which is achiving the expected behaviour initially but is ruined once you start dragging then proceed changing size of the container…

http://jsfiddle.net/LPLXw/2/

do u think this would be a expected behaviour?

[DevinClark]

I have ran into this issue also. I think the expected behavior should be to keep the elements contained on resize.

[desandro]

Hmm, I understand the problem, but I kind of feel like this is on the border of Draggabilly's functionality. I'm considering adding a separate add-on script that would support this feature.

---

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

[DevinClark]

That would be awesome!

[desandro]

I should add a reposition method that re-runs all layout logic, using the current position.

[squashal]

+1

[dtheb]

i really need this functionality.. any solution got implemented yet ??

[daslicht]

maybe set the position ofthe draggable item by using vw /vh instead of pixels ?

[flastowizka]

I tried to call the methods inside a 'dragStart' and 'pointerUp' to recalculate, but not work.
I am not sure if its not recalculate because is required a 'startPosition' by pointer.

[flastowizka]

I created an workahound:

function FctAdjustTop(box) {
var totalTop = $(".conteintment").offset().top + $(".conteintment").height();
var totalTopElement = $(box).offset().top + $(box).height();
var diff = totalTop - totalTopElement;
diff = diff + 5;

    if (diferenca < 0) {
        $(box).css("top", diff);
    }
}

This code set to bottom all box without conteintment

[DavidRojoM]

I've made this workaround for keeping the draggable inside the window when resizing

      const $draggable = document.querySelector('.side-button');

      const draggie = new Draggabilly($draggable, {
        containment: 'body',
      });

      window.onresize = () => {
        const { top, left, height, width } = $draggable.getBoundingClientRect();

        const windowBottomCoordinate = window.scrollY + window.innerHeight;
        const windowRightCoordinate = window.scrollX + window.innerWidth;

        draggie.setPosition(
          left > windowRightCoordinate ? windowRightCoordinate - width : left,
          top > windowBottomCoordinate ? windowBottomCoordinate - height : top
        );
      };