Monaca Onsen UI Discord Chat Github Repo

Problems in Drag & Drop while moving to Onsen 2



  • @CNaik If you need immediate assistance, the Onsen technical support is the more appropriate avenue. Their team responds amazingly fast!

    https://monaca.io/service/index.html

    Advanced Technical Support / Code Review

    For advanced technical support and partial code review we provide ticketbased support to Monaca users. Our professional team will help you solve the issues in your program or provide specific sample code, based on your needs. Please use this option when you require immediate response from our team.


  • Onsen UI

    @CNaik @munsterlander Since I’m living in Tokyo our online time is probably quite different :sweat_smile:

    This is a bit complex problem and we will think how to manage it internally in Onsen UI. For now, since I guess it can work for your application, maybe you can dispose it and then create the GestureDetector again.
    document.body._gestureDetector.dispose(); and document.body._gestureDetector = new ons.GestureDetector(document.body); should do the trick.



  • @Fran-Diox Thank you very much. That’s what I was looking for.

    Timing is not a problem. :blush: There is no urgency as this is not a project with critical deadline. We are evaluating Onsen UI by doing one real project.

    Regards,
    CNaik.


  • Onsen UI

    @CNaik I hope you like it so far :relaxed:
    We just finished most of the reference docs. I think the webpage will be updated in few hours.



  • @Fran-Diox yes, I do. It makes our life very easy. Having updated reference docs will be very helpful.

    Thanks a ton for everything.

    Regards,
    CNaik.



  • @Fran-Diox need your advice in this matter as got stuck again.

    The work around you gave is working fine on a single page. I have updated the demo ( http://codepen.io/CNaik/pen/pyraoa ) to have related buttons.

    BUT it doesn’t work when the content is inside splitter, drag and drop stops working in that case. Here is another sample demonstrating the problem - http://codepen.io/CNaik/pen/xVYEmd

    HTML related to drag and drop and controller codes are same. I have also made sure that controller function to disable gesture detector is being called.

    Hope you have workaround :) Otherwise will have to do weird adjustment in the application. Kindly let me know.

    Regards,
    CNaik.


  • Onsen UI

    @CNaik There are some components like ons-splitter-side and ons-pull-hook that have their own GestureDetector because it’s slightly different form the main one. I guess you can apply the same fix to document.querySelector('ons-splitter-side')._gestureDetector as well. As I said, we should check if GestureDetector has incompatibilities with other libraries and try to fix it.



  • @Fran-Diox ah…ok, very clear. Thank you. This will work as we are going to switch off gesture on one specific page where drag and drop is required.

    Just one quick question (probably a last one on this :blush:). Unlike document body, gesture detector couldn’t be reactivated for splitter. I tried reactivating it by assigning new ons.GestureDetector(…) to variable name, document.querySelector(‘ons-splitter-side’), document.getElementById (…) but none of them worked. (demo updated)

    Once disabled, I couldn’t again get swipe menu activated. I saw in documentations that ons.GestureDetector has optional options parameter. Do we need to use any specific option in case of splitter?

    Regards,
    CNaik.


  • Onsen UI

    @CNaik Oh yes, I forgot about that, sorry. You need to pass the parent element as a parameter. Something like this:
    splitterSide._gestureDetector = new GestureDetector(splitterSide.parentElement, {dragMinDistance: 1});



  • @Fran-Diox unfortunately it didn’t solve the problem (demo updated). May be any other required options missing?

    One thing I noticed that for dispose and create statements, I had to use variable name specified in id attribute in HTML. Normally we use variable specified with var attribute. Which is not working in this case. I guess this might be very normal. But I noticed this for first time and hence bringing into your notice if it’s something new.

    Regards,
    CNaik.


  • Onsen UI

    @CNaik One more thing, it needs to refresh the swipeable attribute in order to listen for the events again. The easiest way is to remove it and set it again. Updated here: http://codepen.io/frankdiox/pen/RaQpQQ

    About using var attribute or not… var is only for Angular stuff. Here we are modifying the core so we need to use the real components. Normally you would need to do document.querySeletor('#splMenu'); to access the component. However, due to some hidden feature of HTML (not in Onsen), global variables are created for every ID so technically you can use splMenu with the same result. For example, you can access to <div id="myDiv"></div> with window.myDiv. This is quite error prone and I’d say it’s not recommended.



  • @Fran-Diox it’s working perfectly now. Thank you for your valuable input.

    We will avoid using global variables.

    Regards,
    CNaik.