disabling Draggabilly also disables touch events

[pliablepixels]

Hi there, please see this example:

http://codepen.io/pliablepixels/pen/vGdVOa

Please resize the window to be able to scroll up and down.

1. When you run the demo, you can tap on any images and scroll the window up and down (this is the natural browser scroll)
2. When you init dragabilly on this packery object and set it to disable(), you will notice you can no longer tap and scroll the window up and down.

This is a not a problem for desktops as you can still use a mouse wheel to scroll the browser window, but for touch devices, it takes away the ability to scroll the window when drag is disabled.

Would you have a suggestion on how to address this issue? Ideally, disabling drag should still pass events back to the browser for normal operation.

[desandro]

Thanks for reporting this issue. Yes, when you initialize Draggabilly on all the content on the page, then there is no where left for the user to touch scroll on that page.

There is no built in solution at the moment. But you could get creative: Add space on the left or right so the grid does not up the entire window.

You may also be interested in desandro/draggabilly#97

[pliablepixels]

I've actually been trying to init and destroy the drag array dynamically. The idea I had was that when you tap enable drag, it instantiates drag and binds. When you tap disable drag, it destroys the drag objects because the items have already been placed. The advantage is scroll starts working. This situation will also work for me. However, when I try that, the packery layout messes up.

Here is a forked codepen
http://codepen.io/pliablepixels/pen/jqZdXV?editors=1010

In this example, I instantiate drag when you tap on enable. When you tap disable, I attempt to delete it, but the packery layout messes up. Can you tell me what I am missing? If I get this approach working, my objective of being able to scroll when not dragging is met.

[desandro]

I recommend enabling and disabling Draggabilly with the enable and disable methods. You'll also need to unbindHandles and bindHandles so touch events work without Draggabilly capturing them and users can touch-scroll. These are two undocumented methods.

[pliablepixels]

Bravo! Thank you! That works very well. I'll do some more testing and will close.

[rkbansal]

Can you please just write a simple example using enable and disable methods with unbindHandles and bindHandles?

[pliablepixels]

@rkbansal

This code example associates a drag handler to each packery element and disables them

pckry.getItemElements().forEach(function(itemElem)
{
            draggie = new Draggabilly(itemElem);
            pckry.bindDraggabillyEvents(draggie);
            draggies.push(draggie);
            draggie.disable();
            draggie.unbindHandles();
});

This code re-enables drag at any time

for (i = 0; i < draggies.length; i++)
{
     draggies[i].enable();
     draggies[i].bindHandles();
                
}