Monaca Onsen UI Discord Chat Github Repo

Unable to disable ons-splitter-side Gesture Detector

  • 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,

  • Onsen UI

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

  • @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?


  • Onsen UI

    @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…

  • 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?


  • Onsen UI

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