Problem with dragit on iPadOS

[richardgleaves]

I recently used jsPanel to create a small footer-only panel which is draggable. Everything is working fine, except for one specific case on one specific target device.

On an iPad running iPadOS 14.6, if I drag the panel to the very bottom of the screen, and then swipe up from the bottom of the screen to display the iPad app dock, the dock completely covers up the panel. Hiding the app dock uncovers the panel, but now its drag behavior no longer works properly. The panel itself can no longer be dragged, but if I repeatedly tap my finger anywhere on the iPad screen, the panel will instantly jump to that location.

I've tested this out several times, and it appears to be 100% reproducible as a bug.

I'm using jsPanel 4.12.0.

[Flyer53]

Hi Richard,

Well, the only Apple device I have for testing is an older iPad Air running IOS 12.5.4. But I can confirm the issue on that device.

Can you confirm that the issue only appears after the app dock was used? And only when the panel was dragged very close to the bottom of the screen before opening the app dock? However, it seems to be very device/OS specific thing and at the moment I really can't say whether this is a jsPanel issue or a IOS issue.

But there seems to be a workaround: On my device it seems to work when you configure option.dragit with a containment that prevents the panel from being dragged fully to the bottom. I tried

jspanel.create({
    dragit: {
        containment: [0, 0, 20, 0]
    }
});

It looks like the bottom containment just needs to be enough that you don't inadvertantly open the app dock when you want to start dragging the panel. Could you please check whether that works on your device?

Regards, Stefan

And by the way: Thank you very much for your generous donation. I appreciate that a lot 😄

[richardgleaves]

  Stefan,

To address the issues in reverse order:

– I was more than happy to send a donation, considering all the grief you saved me by creating jsPanel. I pushed it hard to implement a pretty nonstandard panel, and it came through with exactly what I wanted.

– Regarding the aforementioned grief, the Bootstrap folks seem to have created a problem for themselves by promoting Bootstrap 5 as jQuery-free, but then not providing equivalents for all the old jQuery and jQueryUI features, such as draggable modals/panels. For my project I was expecting either to find draggable support already built into B5 modals, or at least have the Bootstrap folks steer people like me towards solid third-party solutions such as jsPanel. But the Boostrap 5 website does neither. I spent hours in Google trying to find a library like jsPanel, but ended up discovering it only by chance. In my opinion, jsPanel deserves much more promotion from the Bootstrap folks as a key add-on for Bootstrap 5.

Regarding the problem I reported previously about the iPadOS dock: in classic bug fashion, it went from 100% reproducible to wholly evaporated, within an hour after I posted the report on GitHib. This change may have resulted from my adding "position:fixed" to the page's body tag at some point, but I'm not really sure. All I know is that the problem I reported earlier is now a non-issue which I'm not interested in pursuing anymore, since at this point there seems nothing to pursue.

– Finally, I can report with confidence a minor typo in the 4.12.0 documentation. The descriptions for the dragit "start" and "stop" functions were evidently created with a copy-and-paste, and as a result, the description for "stop" in the documentation excerpt below contains the following error: on the last line shown below, the underlined instance of "started" should be "stopped".

Thanks again for jsPanel.

===========================

stop Function undefined A callback function or array of functions to execute once when the dragging operation stopped.

Values: Function or Array of functions Function parameters: panel the panel being dragged paneldata a plain object with key:value pairs for CSS left, top, width and heightpixel values as unit-less numbers at the moment the dragging started.

[Flyer53]

Hi Richard,

Thanks again for the praise. Happy to hear that 😄 And once more a big Thanks for the donation. Your money (and some more) went right away to a aid organization helping the victims of very severe flooding we had in parts of Germany due to super heavy rains (182 liters per square meter in a single day) a few days ago. Dozens of houses litterally washed away and hundreds severly damaged. A death toll of 140 so far and a lot of people are still missing.

The dragit issue: The issue itself is still there. But I simply assume its caused by the way IOS handles the app dock. So I won't do anything else about it either. If I get really bored I might try to find out some more 😏 Thanks for the hint concerning the dragit docs ... it's corrected. If you're happy with it as it is now ... please close the issue.

Bootstrap: I used to work with Foundation and Bootstrap (alpha.jspanel.de is still using Bootstrap 4). But with current jspanel.de I moved to Tailwind CSS. Tailwind CSS is a strictly CSS only framework with a completely different approach. I like it a lot. It took me just a single day to rework the jsPanel website.

Happy coding, Stefan

[richardgleaves]

Reported problem no longer occurring, and may have been due to issues in my code.