I'd like to offer users a drag and drop experience when using a desktop computer where possible, but hide it on mobile devices where this is not an option.
After some research, it seems that iOS supports a lot of the modernizr classes you might use to detect this - e.g. the filesystemAPI, drag and drop etc.
Are there any test I can do, to see if a user can actually drag and drop files onto the relevant area? The easiest way I've found so far is to disable it based on the userAgent, but that's really not robust enough...
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/i)
|| navigator.userAgent.match(/Android/i)) {
$('#dragandrophandler').css('display','none');
};
Related
What is the best way to make a drag and drop builder in 2017? Yes, this question has been asked before but that was 5 years ago and I assume things have changed? HTML5, jQuery UI or is there another option now?
A more recent question Form Builder From Scratch - HTML 5 Drag and Drop, or JQuery UI Draggable, or What? was also left unanswered.
Any help would be great! I have started to play around with both (I have never used HTML5 or jQuery UI's Drag and Drop so it's hard for me to make a decision.) and jQuery UI does seem to be easier to use and understand but also seems quite buggy, well at least in codepen.
We just did a bit of research into Drag and Drop with ReactJs and honestly came out the other side a bit sad. So if you're looking for pure HTML 5 Drag and Drop this is a fantastic site to show you how screwed you are:
https://caniuse.com/#feat=dragndrop
So as of the time of writing this, if you went pure HTML5 DND you really wouldn't cover the mobile scenarios.
Now what isn't listed in this is all the edge cases to get the feature looking the same across browsers. Between Edge, Firefox and Chrome, one adds an Icon to show that you are dragging at item, one has a slight opacity on a copied element and one does something else. Either way, aligning these designs (depending on how annoying your design team is) can be easy (e.g. don't care as long as drag and drop works) to impossible (e.g. get rid of the icon while I'm dragging).
Now when it comes to JQuery, it's been around a while but that doesn't mean it doesn't have it's faults as well. Because it runs in the JS layer instead of the browser itself, depending on how much is going on in the system, it can feel a bit slow. Also I did notice it started dragging on annoying situations like when you're trying to swipe the page to scroll in Edge. That could have also been poor programming on our part.
I think in the end we just used React Dnd with the HTML5 backend. Seems to work pretty good and for those mobile scenarios we just have menu options which expose the same functionality in a different form. It ended up helping with accessibility as explaining all the actions for drag and drop via keyboard shortcuts was slightly annoying.
Not sure if that helps but if I recall (and it's been about 6 months) that's the run down.
I recommend using jqueryui with a small hack called touch punch that allows you to capture the events of mobile devices such as ontouch on the screen. I prefer jqueryui because it is more complete than HTML5 and relatively easy to use.
The link:
http://touchpunch.furf.com
Good luck and greetings
As the title states, is there a way to detect if a mobile user is doing a tap and drag with javascript / jquery? Running into a user experience issue where ripple effects I have set on elements is activate while tap & dragging / browsing content on mobile devices.
I would recommend using jQuery touch punch for that.
You have great documentation and lots of events you can hook into for all sorts of tasks.
You can do things like Drag/Drop, Resize and more..
Have a look at JQuery Mobile. It has tap and swipe events.
I have a web page that I am trying to make "friendly" to touch devices. With the proliferation of devices with medium sized screens (small tables, large phones) my approach is to make one responsive layout with CSS and javascript tweaks where necessary. This is going pretty well, but I'm wrestling with select controls.
On my android phone and android tablets, the browsers that I've tested render a friendly large dialog when I touch a select control (I still need to test an Apple device), but on a Windows 8 touchscreen laptop, I am left trying to click the little select options. Other than just making the select control a very large font, is there already an established way to make the select more friendly?
I'm thinking of detecting ontouchstart then creating a pop up div with buttons or styled hyperlinks to give an experience like that provided by Android - but then I'd need to disable this on browsers that already handle select controls well...
Anyone have any advice? (I don't have any code yet, and this would apply to any select control)
The most friendly way to deal with controls is to not touch them at all. Let the browser handle them the best way it can — unless you're providing extra functionality like you can with Chosen.js
Usually, yes, setting a larger font size would help. http://css-tricks.com/dropdown-default-styling/
I'm building a draggable timeline of sorts for a new project using some simple jquery ui features and have run into a problem regarding mobile devices.
Namely, drag and drop just doesn't work on touch screen devices like that. I've noticed any video players you pull up run proprietary plugins on your phone so moving the timeline around is not an issue. But, seeing as I'm not really doing video, I was hoping for some sort of work around.
Thoughts?
You could try to use JQuery Mobile Drag and Drop
See here for some documentation.
NOTE Using JQuery mobile will work on some phones, but not all phones. Older Blackberries, HTC Phones, and many other ones cannot handle many JQuery Mobile calls. Look at this page for more information on compatability
I'm developing a web application and I noticed how irritating mouse gestures can be on it, so, is there a way to disable them (Firefox and Opera particularly)?
Edit: It seems there is some confusion. I'm developing a web based software that has an interface with such complex actions and tasks such as mouse selections, file drag and dropping, a desktop and a Windows Explorer -style filesystem. Whenever I try to select multiple virtual files and move them around, mouse gestures will apply and take me away from the software and navigate to the previous page or do something else nasty. My project is not a website, it's a web application -- mouse gestures are poison to this project.
You don't say you're using a library, but this is a jQuery plugin to detect gestures: http://plugins.jquery.com/project/jGesture
Looking at the source code, looks like it depends on measuring the action b/t mousdown and mouseup ... lotsa math.
And Mozilla offers some event handlers.. https://developer.mozilla.org/En/DOM/Mouse_gesture_events but it has a big Non-standard stamped on it.
the polite thing to do would be to inform users that to take full advantage of your site, they should disable mouse gestures temporarily.