Interact.js draggables not visible when dragging out of a dropzone with overflow:scroll

Question

I'm building an interact.js app with two dropzones. One begins with all of the draggables in it and is scrollable. When dragging out of the origin dropzone, the draggables become hidden.

I've tried all of the suggested methods such as setting overflow: visible and position: absolute on the draggables. I've also tried almost every possible combination of z-indexes that could possibly make sense.

Here's a JSfiddle with the problem re-created: http://jsfiddle.net/L5g9prao/1/

Expected behaviour: Draggables stay visible when dragging between dropzones
Actual behaviour: Draggables become hidden as the leave the origin dropzone.

Any assistance would be greatly appreciated. Thanks!

MrSpinn · Accepted Answer · 2019-01-11 16:43:23Z

1

The solution I found was to apply position: fixed and a top position to the draggable for the onstart event like so:

onstart(event) {
    let target = event.target;
    let position = target.getBoundingClientRect();
    target.style.position = "fixed";
    target.style.top = position.top + "px";
}

And then in my use case, the draggable is deleted and cloned so I don't have to remove those properties, but if you need to, do so in the onend function like so:

onend(event) {
    let target = event.target;
    target.style.position = "relative";
    target.style.top = "auto";
}

Thanks to @marcdubs for the answer

answered Jan 11, 2019 at 16:43

MrSpinn

1032 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Interact.js draggables not visible when dragging out of a dropzone with overflow:scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related