I'm building a tool with Ionic 2, which needs to implement drag and drop functionality. In the beginning I was testing everything in the browser using ionic serve, everything was working, coordinates of dragged images were stored in a SqlStorage (I'm using Ionic2 beta11).
But then I start testing on mobile device, and noticed that dragstart, dragend, dragover events doesn't work on it. I changed these to touchstart, touchmove, touchend, but then I faced problems, because there are limited properties of these events, so I cant access some which I was using when testing in browser.
So my question would be if there is there another events for using drag and drop for mobile devices?
Related
I want to create a hybrid mobile app using ionic capacitor. When user logs in the app should open the main angular app in a hidden webview to initialize the angular app. The webview should be hidden for this time. After this when a user clicks on any links in mobile app, it should open in the webview and this time the webview should be displayed. The webview should open in the app container and not in the browser window (like InApp browser). Please help me if anybody have explored this kind of solutions.
My existing app is built using Xamarin and its built on the above concept.
I have tried the InApp browser but it does not give a good impression to the end user expecting a complete mobile app.
What you want to do is more or less possible if I've understood you well. I've done it in my job. We have a ionic app, but then there are some native screens developed natively for Android (with Java) and iOS (with Swift). With ionic you can call native code from Javascript. For that you need to make your own local Capacitor plugin: https://capacitorjs.com/docs/plugins/creating-plugins
In a plugin, the ionic Javascript function will trigger a native function (Java/Kotlin for Android - Swift/ObjectiveC for iOS). Once there, you can freely create native screens (Android = Activity, iOS = Storyboard/Controller) and then launch your native screens in the app. In our project most of the app is ionic, but we developed our own native screens such as a PDF Viewer, a Web browser, a QR scanner, etc.
But an app is not like a website, an app is a stack of screens. Which means that everytime you access a new screen, it's added to the top of the stack and the user can go back to the previous one. So, ionic will launch first. Inmediately after starting the app (or whenever you want) you can move the user to a native (android/ios) screen. However, if the user presses the native android back button, he will come back to ionic. If you want to prevent that, you need to code that behavior yourself (google android prevent back button). Likewise, you "can't" make the user go from the native screen to ionic, you can bring him back to ionic by navigating back programmatically.
Perhaps you can also change the launch activity to use a different one, and then later launch the ionic activity with native code. But I haven't done this myself and it could break ionic, so I can't advice you through this path.
I hope my answer helps, but I'm not sure I understood what you want to accomplish.
We ran ionic build --prod for an Ionic Angular project to generate the www folder on a Debian 10 server. Set up the domain and everything works properly.
The problem is that when opening the app in Chrome and sometimes in Safari as well on desktop, the icons, buttons and some other elements don’t show up the same as on localhost when testing with ionic serve. Specifically, a new class is added to some elements “sc-ion” that causes problems in the UI (e.g. the icons don’t have the right line-height, the buttons’ text has a different color, etc.). Please see below some screenshots.
Do you know how we can remove the sc-ion class and keep the styling consistent with what gets displayed with ionic serve on localhost? I look forward to hearing your feedback.
Thanks for your help,
Andy
Hotjar was causing the issues.
I am developing a Chrome application that currently resembles a File Manager in its UI. I would like for users to be able to drag and drop "files" both into and out of the app, for example, to and from their native file managers.
Does this seem impossible, therefore should I be looking for other user interface options?
I have looked into this question: Drag out files from browser using javascript but unfortunately it doesn't seem to work on ChromeOS, the platform I am developing for.
when I use ionic serve --lab, the browser won't let me use the pull-to-refresh gesture.
When I click and drag my mouse the app doesn't react to it. I had it working this morning but then I shut down the ionic serve and after it it didn't work anymore. Code to the pull-to-refresh isn't changed.
When I use it on a device or emulator it does work.
Does anybody have a clue?
I'm testing on Chrome version 43.0.2357.124 m
I am developing a application in Sybase Unwired Platform ,Hybrid Web Container. When I deploy it on Android it is working fine but when I deploy it on Iphone or blackberry I can see the menu items like back,next displayed on menubar and some on toolbar as it is in Iphone native application and the buttons on the screens are not working. I think its because of JQuery but is there any workaround to remove this menubar and toolbar and make it run properly.Thanks in advance.
I haven't tried it yet, but if you are in the last SUP version, it's supposed that you can have buttons on the screen to call SUP requests and operations without the need to add them as menuItems.
The problem with menu items is that they work different in each platform, and it's not recommended to use them anymore (even google said that), and it makes the HTML5 app less multi platform.
In my SUP apps, I hid the menuItem dynamically after the workflow initialization, and created a custom html button (using Custom.js) that calls the menuItem javascript function.