Unable to disable ons-splitter-side Gesture Detector

CNaik

Hi Friends,

I want to disable Gesture Detector of ons-splitter-side on a specific screen as I need to provide drag and drop feature. I have done similar implementation in older version of Onsen UI by calling dispose() of gesture detector of body and ons-splitter-side BUT that’s not working in Onsen UI 2.7.0.

I have setup two Codepen samples to make this clear. Both the samples uses same CSS and JS libraries.

Sample 1 - **WORKING ** - The text can be dragged. It is directly inside the body. Have disposed Gesture Detector of body in controller.

Sample 2 - **NOT WORKING ** - The text can’t be dragged. It placed inside splitter side. Have tried disposing Gesture Detector of splitter side using ons.GestureDetector(document.getElementById(‘splitterMenuDemo’)).dispose() BUT it’s not working…

In older version of Onsen UI, it was done using document.getElementById(‘splitterMenuDemo’)._gestureDetector.dispose() BUT that’s throwing an error in new version.

I tried various other properties and functions but couldn’t find the solution.

A help here would be much appreciated.

Thanks & Regards,
CNaik.

Fran Diox

@CNaik The one you are looking for is probably document.getElementById(‘splitterMenuDemo’)._swipe.gestureDetector.

CNaik

@Fran-Diox

Thank you for your quick reply.

Yes, the solution worked in Codepen. BUT didn’t work in the actual application which has content with more hierarchy of ons-splitter -> ons-splitter-content -> few navigation controller -> ons-page.

I have double checked the library linking and other such things. In fact OnDrag event is being called in controller. So I guess something else in Onsen UI might be blocking drag effect?

Can you give me advise what else could be preventing drag effect?

Regards,
CNaik.

Fran Diox

@CNaik Oh! The navigator also has a GestureDetector now for the swipe-to-pop functionality. You can access it the same way as the splitter: myNavigator._swipe.gestureDetector.

Hmm, maybe we should remove the gesture detector if the swipeable attribute is removed…

CNaik

Moved one step closer.
I can make DIV draggable which directly on the page.

But still DIVs under ons-list can’t be dragged. I tried getting list’s gesture detector without luck. What else in ons-list or ons-list-item can be preventing drag?

Regards,
CNaik.

Fran Diox

@CNaik Can you try without tappable and ripple effects? I’m not really sure why :confused: