You can use the Jquery UI for drag and drop with an additional library that translates mouse events into touch which is what you need, the library I recommend is https://github.com/furf/jquery-ui-touch-punch, with this your drag and drop from Jquery UI should work on touch devises or you can use this code which I am using, … Read more
OK, I’ve worked it out! It involves changing the CSS slightly and adding some JS. Using jQuery to make it easy: $(document).ready(function() { $(‘.hover’).on(‘touchstart touchend’, function(e) { e.preventDefault(); $(this).toggleClass(‘hover_effect’); }); }); In english: when you start or end a touch, turn the class hover_effect on or off. Then, in your HTML, add a class hover … Read more
There is actually a property for this in the CSS4 media query draft. The ‘pointer’ media feature is used to query about the presence and accuracy of a pointing device such as a mouse. If a device has multiple input mechanisms, it is recommended that the UA reports the characteristics of the least capable pointing … Read more
Note (as of 2020-08-04): this solution does not appear to work in iOS Safari v12+. I will update this answer and delete this note once I find a clear solution that covers iOS Safari. CSS-only solution Add touch-action: manipulation to any element on which you want to disable double tap zoom, like with the following … Read more
Disabling user interaction was all I needed! Objective-C: myWebView.userInteractionEnabled = NO; Swift: myWebView.isUserInteractionEnabled = false
As of 2018 there is a good and reliable way to detect if a browser has a mouse (or similar input device): CSS4 media interaction features which are now supported by almost any modern browser (except IE 11 and special mobile browsers). W3C: The pointer media feature is used to query the presence and accuracy … Read more
Since this part of CSS Media Queries Level 4 has now been widely implemented since 2018, you can use this: @media (hover: hover) { button:hover { background-color: blue; } } Or in English: “If the browser supports proper/true/real/non-emulated hovering (e.g. has a mouse-like primary input device), then apply this style when buttons are hovered over.” … Read more
Some compact syntax that achieves the desired result, POJS: “mousemove touchmove”.split(” “).forEach(function(e){ window.addEventListener(e,mouseMoveHandler,false); });
I’ve found an easy approach to do that with the ViewPropertyAnimator: float dX, dY; @Override public boolean onTouch(View view, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: dX = view.getX() – event.getRawX(); dY = view.getY() – event.getRawY(); break; case MotionEvent.ACTION_MOVE: view.animate() .x(event.getRawX() + dX) .y(event.getRawY() + dY) .setDuration(0) .start(); break; default: return false; } return … Read more
tl;dr use this: https://jsfiddle.net/57tmy8j3/ If you’re interested why or what other options there are, read on. Quick’n’dirty – remove :hover styles using JS You can remove all the CSS rules containing :hover using Javascript. This has the advantage of not having to touch CSS and being compatible even with older browsers. function hasTouch() { return … Read more