I'm looking for functionality to allow a user to mousedown and drag to select multiple items. The action would be essentially what you see in the Mac Finder or Windows Explorer.
This might be a duplicate of JavaScript Drag & Select functionality done right and the answer http://threedubmedia.com/code/event/drop/demo/selection is decent, but a little buggy.
Anyone know of any good solutions?
Related
I would like to be able to disable, through JavaScript or some sort of HTML meta-tag, the tap-to-search/touch-to-search feature found on mobile Chrome which shows a banner at the bottom of the browser every time the user long presses/taps on a word in any text paragraph.
This Chrome feature is a problem for me because this contextual banner completely covers the toolbar in the web app that I am developing, which is fixed at the bottom of the page.
I've only found this question from 2015 which references this Google Developers article (also from 2015), but the proposed solutions do not seem to work anymore except CSS "user-select: none"; unfortunately, disabling user selection is not a solution for me since user selection is required for my web app to work.
I have also tried setting event.preventDefault() when the "oncontextmenu" event fires, which does disable the search toolbar when the user taps on a word, but not when a user long presses on a word, as far as I have experienced.
So far the only partial "solution" that has worked for me has been to install the web app: as an installed PWA, tap-to-search does not somehow trigger. It still annoys me a lot that I would have to basically beg my potential users to install the web app on mobile.
I also know that the user can manually disable this feature globally in the Chrome Flags, but this is, I imagine, really annoying for a potential user as well.
Is there anything I am missing here? Do you know of any way to prevent tap-to-search from firing on a long press?
Adding the attribute tabindex="-1" to the <body> tag works for me.
As of 2021, it isn't possible to disable touch-to-search (when this is triggered by a long-press for text selection) in chrome mobile. The Google Developers article is apparently concerned only with touch-to-search triggered through a tap gesture.
Quoting donnd, from bugs.chromium.org:
Regarding #2 -- developer control: The 2015 article that you mentioned (https://developers.google.com/web/updates/2015/10/tap-to-search) focuses on triggering through the tap gesture. As you correctly point out, it does not address the long-press gesture triggering. Touch to Search responds to both tap and long-press but treats them differently. As I'm sure you know, the long-press gesture activates a whole set of features which can include copy, translation, smart text selection, and Web Search. A site developer can markup their page text as non-selectable in order to disable the long-press gesture entirely, but currently there's no way to disable only the Touch to Search response to long pressing. If you'd like to work with us to add such a feature, let us know and we'll file a separate feature request.
What is the easiest way to disable the wheel selector that appears on mobile Safari when a user activates a <select> element?
I have styled the <select> and <option> elements myself, and I would prefer that the user interacts directly, rather than with the scroll supplied by the browser.
You can't disable the wheel selector on mobile Safari.
Generally speaking you could probably preventDefault() on click and touch events on the <select>, however it's not clear how you would then make it actually usable. So, you may want to avoid using a select element at all once you detect an iOS device.
You could employ some widget collection such as this one. It can be used to implement dropdown menus or any other kind of menu, and does not open the big wheel thing on the bottom.
As of 2022 this is no longer an issue. Hooray! They finally got rid of the wheel selector. In iOS Safari the select element is now a normal list, similar to Android. I've been waiting years for this issue to be addressed, the wheel selector was awful UX and is finally gone. iOS Safari is actually a good browser now.
I am working on Angular JS draggable directive. My code is similar to this Plunker
Both my code and this plunker work perfectly on windows when operating with mouse. But on any tab where touch is involved it is not working at all. what might be the reason behind this? any idea how to make it work?
A directive was implemented to control touch events, it is ngTouch. You can find more information here:
http://docs.angularjs.org/api/ngTouch
I additionally I think this post can be helpful:
Javascript Drag and drop for touch devices
I wanted to know how to do a drag and drop image tag using javascript. I know html5 each element can be dragged but I wanted to make it work on older browser. I have made the drag and drop using javascript and it worked fine except in ie and firefox when mouse down, the mouse move event didn't react unless the user click it, and that is the reaction of ie. On firefox, the image got changed to semi-transparency and draggable but my code that dragging it.
Can anyone know how to solve this problem ? please help.
Have you tried jQuery yet? with the addon jQuery ui you can drag and drop every object on a website..
jQuery UI: draggable
Our website makes use of the overLIB library to show "more information" about clickable links on mouseover. The result is that on iOS devices, the first click will result in the mouseover text appearing, while the second will activate the link.
What is the easiest way to keep the mouseover text for non-iOS browsers, while bypassing it for users using iOS, so that for iOS, the links are activated on the first click?
If you want an easy solution, you can use something like Modernizr as described here: What's the best way to detect a 'touch screen' device using JavaScript?. Then, you can bind your overLIB events to the non-touch classes, etc. This way, you can address all touch device users and not just iOS users. Of course, if you want just iOS users, you can always UA sniff ( http://www.quirksmode.org/js/detect.html ), though its not recommended.
However, you then still have the problem that you're loading the overLIB script(s) for users who don't need it. I think the best way to avoid this depends on the rest of your stack.
Another thing to think about is the purpose of the hover tips. If they are useful on your desktop site for helping users to learn about where they're going without making the investment of a click, why aren't they useful on your touch device site? I know that hover is clunky on touch devices, but I think they're common enough since there's no alternative yet. I'd bet that touch device users understand the flow. The only example that comes to mind is Seamless.com - when you select a menu item from a restaurant, you get a "hover" description and then it requires a second click to select the item.
I realize that this is an old question - answering for the Googlers. :)
Another solution is to use .mousemove() instead of .mouseover().
iOS ignores the .mousemove() event and triggers a click on the first touch.