Problems in Drag & Drop while moving to Onsen 2

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

[CNaik]

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

[Fran Diox]

@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});

[CNaik]

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

[Fran Diox]

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

[CNaik]

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

We will avoid using global variables.

Regards,
CNaik.