Problems in Drag & Drop while moving to Onsen 2

[CNaik]

Hi Team,

Need your valuable help here.

Quick question - is drag disabled by default in Onsen 2? If so, how to enable it so to make it working for other library?

The problem:
Earlier while using Onsen 1.3 we build drag and drop DIV feature in our application using angular-dragdrop module ( https://github.com/codef0rmer/angular-dragdrop ) which has jQuery (jquery-2.2.1, jquery-ui v1.11.4) dependency. It was working fine but has stopped working when upgraded project to Onsen 2 (beta 9). The div can’t be dragged anymore. Note that no navigation control is used in page, it uses only ons-page, ons-row and ons-col Onsen controls.

I can setup two demo projects on Codepen for you to have a look. But just asking a quick question in case if this is a known thing in Onsen 2.

Kindly let me know your thought.

Regards,
CNaik.

[Fran Diox]

@CNaik It’s not disabled. It would be nice if you can make that Codepen example so we can have a look (:

[CNaik]

@Fran-Diox Please find below sample links.

Here is the sample using Onsen 1 where Drag & Drop is working - http://codepen.io/CNaik/pen/eZEyLM

Try dragging any number across others and you should see it happening.

And here is the sample using Onsen 2 where Drag & Drop has stopped working - http://codepen.io/CNaik/pen/pyraoa

Note that it has same CSS and JS references except Onsen 2.

Regards,
CNaik.

[CNaik]

@Fran-Diox in case if you have got time to look at above samples, I hope you are clear with the problem.

I am sharing some more information in case if it helps. Please find below.

In above sample, we replaced all ons elements (ons-page, ons-row and ons-col) with plain DIV element BUT still problem remains. Next we stopped calling ons.bootstrap() BUT still problem remains. Finally problem disappeared when we removed scripts onsenui.js and angular-onsenui.js from the page.

Does this mean there is some global problem and not with any specific element?

Regards,
CNaik.

[CNaik]

Hello @Fran-Diox ,

Any thought on this issue?

Regards,
CNaik.

[Fran Diox]

@CNaik Hey! Sorry I had no time to check it before. We added this in beta.7: core: Use a global gesture detector to improve performance.

If you do document.body._gestureDetector.dispose() everything works again. I’m not sure yet why this conflict happens, we will investigate. Thanks for reporting and giving so much information!

[CNaik]

@Fran-Diox Thank you for the work around.

Just for my knowledge, do you think disposing gestureDetector this way will have any side effect? So that we will be careful while using it.

Regards,
CNaik.

[Fran Diox]

@CNaik Yes, sorry, it was more like a confirmation than a work around. Probably certain things won’t work properly, like ripple effect in Material Design I think.

[CNaik]

@Fran-Diox ah… little worrying.

Is there a way to switch it OFF and back ON when needed? I tried setting enabled property of document.body._gestureDetector but it didn’t help.

Say we have a navigation controller within a splitter content. While pushing a specific page we would like to switch OFF this global gesture detector so to make drag and drop working. And would switch it ON with the pop of that page so that we can take benefit of the features like ripple and such others in remaining part of the application.

Regards,
CNaik.

[munsterlander]

@CNaik : Have you tried document.body._gestureDetector.setup()? I am truly curious if this works based on what is in onsenui.js.

[CNaik]

@munsterlander just tried as you suggested. Console shows an error “document.body._gestureDetector.setup is not a function.”

Kindly share if you have any other thought.

Regards,
CNaik.

[munsterlander]

@CNaik I didn’t think that Setup() was exposed as a function but I thought it worth a try. The register function is exposed, but I think you have to do it for each gesture that you want to register. @Fran-Diox and team will be able to answer much better than I, as I am simply digging into the Onsenui.js file. I am trying to get a better understanding of the components. Apologies for giving you a false lead.

[CNaik]

@Fran-Diox I would like to have your thoughts on whether it’s possible to switch ON / OFF gestureDetector on demand? As detailed in my earlier post 2 days back in this thread.

Regards,
CNaik.

[munsterlander]

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

[Fran Diox]

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

[CNaik]

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

[Fran Diox]

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

[CNaik]

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

[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.

[Fran Diox]

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