On implementing drag-n-drop of an image for touch devices, I have a problem converting touch events to mouse events. Events are not dispatched or don't work as supposed. I used this guide and learnt other answers.
To minimize the question, I'll narrow to the drag event only, without drop. Hopefully if it's solved, the other part will be solved, too. When I drag the image with mouse, I get the desired behavior - the ghostly image and the changed cursor:
I need to have the same ghostly image when touch-drag on a device, but no luck:
In order to achieve the desired behavior, I try to simulate a mouse event when touch event happens.
<img id="hammer" src="https://i.stack.imgur.com/9oV2e.png" />
<script>
var hammer = document.getElementById("hammer");
hammer.addEventListener("touchstart", touchHandler, true);
hammer.addEventListener("touchmove", touchHandler, true);
function touchHandler(event) {
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type) {
case "touchstart": type = "dragstart"; break;
case "touchmove": type = "drag"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, first.target);
this.dispatchEvent(simulatedEvent);
event.preventDefault();
}
</script>
The fiddle
It seems that the touch events are not converted to drag events. How can I achieve it? If I add EventListeners to document instead of hammer, I get an error. If I wrap hammer with a container div, and addEventListener to the container, it gives no success, too. If I change type = "drag" to type = "mousemove", no difference.
Related
Working on a website that is also viewable on mobile and need to bind an action on both touchstart and mousedown.
Looks like this
$("#roll").bind("mousedown touchstart", function(event){
someAction();
It works fine on Iphone, but on Android it responds twice.
event.stopPropagation();
event.preventDefault();
Adding this code fixed it for Android Chrome, but NOT for Android default browser. Any other tricks that can fix the problem for all android?
element.on('touchstart mousedown', function(e) {
e.preventDefault();
someAction();
});
preventDefault cancels the event, as per specs
You get touchstart, but once you cancel it you no longer get mousedown. Contrary to what the accepted answer says, you don't need to call stopPropagation unless it's something you need. The event will propagate normally even when cancelled. The browser will ignore it, but your hooks will still work.
Mozilla agrees with me on this one:
calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing
EDIT: I just read the question again and you say that you already did this and it didn't fix the Android default browser. Not sure how the accepted answer helped, as it does the same thing basically, just in a more complicated way and with an event propagation bug (touchstart doesn't propagate, but click does)
I have been using this function:
//touch click helper
(function ($) {
$.fn.tclick = function (onclick) {
this.bind("touchstart", function (e) {
onclick.call(this, e);
e.stopPropagation();
e.preventDefault();
});
this.bind("click", function (e) {
onclick.call(this, e); //substitute mousedown event for exact same result as touchstart
});
return this;
};
})(jQuery);
UPDATE: Modified answer to support mouse and touch events together.
taking gregers comment on win8 and chrome/firefox into account, skyisred's comment doesn't look that dumb after all (:P # all the haters)
though I would rather go with a blacklist than with a whitelist which he suggested, only excluding Android from touch-binds:
var ua = navigator.userAgent.toLowerCase(),
isAndroid = ua.indexOf("android") != -1,
supportsPointer = !!window.navigator.msPointerEnabled,
ev_pointer = function(e) { ... }, // function to handle IE10's pointer events
ev_touch = function(e) { ... }, // function to handle touch events
ev_mouse = function(e) { ... }; // function to handle mouse events
if (supportsPointer) { // IE10 / Pointer Events
// reset binds
$("yourSelectorHere").on('MSPointerDown MSPointerMove MSPointerUp', ev_pointer);
} else {
$("yourSelectorHere").on('touchstart touchmove touchend', ev_touch); // touch events
if(!isAndroid) {
// in androids native browser mouse events are sometimes triggered directly w/o a preceding touchevent (most likely a bug)
// bug confirmed in android 4.0.3 and 4.1.2
$("yourSelectorHere").on('mousedown mousemove mouseup mouseleave', ev_mouse); // mouse events
}
}
BTW: I found that mouse-events are NOT always triggered (if stopPropagation and preventDefault were used), specifically I only noticed an extra mousemove directly before a touchend event... really weird bug but the above code fixed it for me across all (tested OSX, Win, iOS 5+6, Android 2+4 each with native browser, Chrome, Firefox, IE, Safari and Opera, if available) platforms.
Wow, so many answers in this and the related question, but non of them worked for me (Chrome, mobil responsive, mousedown + touchstart). But this:
(e) => {
if(typeof(window.ontouchstart) != 'undefined' && e.type == 'mousedown') return;
// do anything...
}
Fixed using this code
var mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var start = mobile ? "touchstart" : "mousedown";
$("#roll").bind(start, function(event){
This is a very old question but I came across the same problem and found another solution that does not stopPropagation(), preventDefault() or sniff the type of device. I work on this solution with the assumption that the device supports both touch and mouse inputs.
Explanation: When a touch is initiated, the order of events is 1) touchstart 2) touchmove 3) touchend 4) mousemove 5) mousedown 6) mouseup 7) click. Based on this, we will mark a touch interaction from touchstart (first in chain) until click (last in chain). If a mousedown is registered outside of this touch interaction, it is safe to be picked up.
Below is the logic in Dart, should be very replicable in js.
var touchStarted = false;
document.onMouseDown.listen((evt) {
if (!touchStarted) processInput(evt);
});
document.onClick.listen((evt) {
touchStarted = false;
});
document.onTouchStart.listen((evt) {
touchStarted = true;
processInput(evt);
});
As you can see my listeners are placed on document. It is thus crucial that I do not stopPropagation() or preventDefault() these events so they can bubble up to other elements. This solution helped me single out one interaction to act on and hope it helps you too!
I recommend you try jquery-fast-click. I tried the other approach on this question and others. Each fixed one issue, and introduced another. fast-click worked the first time on Android, ios, desktop, and desktop touch browsers (groan).
Write this code and add j query punch touch js.it will work simulate mouse events with touch events
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
This native solution worked best for me:
Add a touchstart event to the document settings a global touch = true.
In the mousedown/touchstart handler, prevent all mousedown events when a touch screen is detected: if (touch && e.type === 'mousedown') return;
I think the best way is :
var hasTouchStartEvent = 'ontouchstart' in document.createElement( 'div' );
document.addEventListener( hasTouchStartEvent ? 'touchstart' : 'mousedown', function( e ) {
console.log( e.touches ? 'TouchEvent' : 'MouseEvent' );
}, false );
I'm working on a html5 canvas game, but I don't know how to handle touch events. When a user touch the screen, and drag, then the browser will scroll the page. I would like to prevent it, and get the touch start, and touch end position. Is it possible?
Thanks in advance
You need to override the default touch behaviour to stop touchevents dragging the page. Clearly, you'll need to handle them again if your page becomes larger than the available area, but as you're making a game, going to assume you're doing 100%/100% layout.
function preventBehavior(e) {
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, {passive: false});
Edit: here's the W3C recommendation talking about touch events, which might be handy for you.
Due to breaking changes made in recent versions of Chrome, the above answers are no longer correct. Attaching a touch event listener to the document or body elements will cause the event listener to be registered in "passive" mode, which causes calls to preventDefault to be ignored.
There are two solutions:
The preferred solution is to use the CSS style touch-action to specify that no scrolling should happen (e.g. with the value "none")
In cases where this is not appropriate (e.g. if the type of interaction should change dynamically in a way that cannot be determined before the gesture begins) then the event listener must be registered with the third parameter set to { passive: false } (you should perform browser detection to ensure that this style is supported first, though).
If you don't want to use jQuery mobile or any other library then you can try this.
var startX, startY, endX, endY;
document.addEventListener("touchstart", function(e){
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
e.preventDefault();//Stops the default behavior
}, false);
document.addEventListener("touchend", function(e){
endX = e.touches[0].pageX;
endY = e.touches[0].pageY;
e.preventDefault();//Stops the default behavior
}, false);
canvas.addEventListener('touchstart', function(e)
{
alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY);
}
canvas.addEventListener('touchend', function(e)
{
alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY);
}
Here's a good article about touching and gesturing on mobile phones:
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
Following solution preventing scroll when dragging AND at the same time usual scroll is working (when not dragging)
var scrollable = true;
var listener = function(e) {
if (! scrollable) {
e.preventDefault();
}
}
document.addEventListener('touchmove', listener, { passive:false });
onDragstartHandler() {
scrollable = false;
}
onDragendHandler(} {
scrollable = true;
}
Don't forget to bind onDragstartHandler and onDragendHandler to related elements
I am experimenting with the HTML5 file API. I notice however that browsers have a default behaviour where they display an image if you drag the image into the browser. This can however be annoying if your aim is to upload the image rather than to view it.
I am wondering if there is a way of preventing this behaviour? I have tried stopPropagation / preventDefault on an ondrop event which works somewhat, however leaves the "drop" cursor in place giving the impression that the image can be dropped anywhere on the page.
Ideally you would only see the "drop" cursor on the designated area where images are meant to be dropped.
The dataTransfer object has dropEffect and effectAllowed properties. Not exactly sure what the difference between them, but setting both to 'none' should help.
$(document).bind({
dragenter: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
},
dragover: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = dt.dropEffect = 'none';
}
});
See the http://jsfiddle.net/andreymir/H3RR7/embedded/result/ - drop allowed to rectangle only.
Perhaps this is what you are looking for? I designed this myself.
http://rightandrong.info/html5upload/Upload.html
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am looking for a drag & DROP plugin that works on touch devices.
I would like similar functionality to the jQuery UI plugin which allows "droppable" elements.
The jqtouch plugin supports dragging, but no dropping.
Here is drag & drop that only supports iPhone/iPad.
Can anyone point me in the direction of a drag & drop plugin that works on android/ios?
...Or it might be possible to update the jqtouch plugin for droppability, it already runs on Andriod and IOS.
Thanks!
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, it also converts mouse events into touch and it works like magic.
function touchHandler(event) {
var touch = event.changedTouches[0];
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init() {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
And in your document.ready just call the init() function
code found from Here
For anyone looking to use this and keep the 'click' functionality (as John Landheer mentions in his comment), you can do it with just a couple of modifications:
Add a couple of globals:
var clickms = 100;
var lastTouchDown = -1;
Then modify the switch statement from the original to this:
var d = new Date();
switch(event.type)
{
case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
case "touchmove": type="mousemove"; lastTouchDown = -1; break;
case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
default: return;
}
You may want to adjust 'clickms' to your tastes. Basically it's just watching for a 'touchstart' followed quickly by a 'touchend' to simulate a click.
Thanks for the above codes! - I tried several options and this was the ticket. I had problems in that preventDefault was preventing scrolling on the ipad - I am now testing for draggable items and it works great so far.
if (event.target.id == 'draggable_item' ) {
event.preventDefault();
}
I had the same solution as gregpress answer, but my draggable items used a class instead of an id. It seems to work.
var $target = $(event.target);
if( $target.hasClass('draggable') ) {
event.preventDefault();
}
Old thread I know.......
Problem with the answer of #ryuutatsuo is that it blocks also any input or other element that has to react on 'clicks' (for example inputs), so i wrote this solution. This solution made it possible to use any existing drag and drop library that is based upon mousedown, mousemove and mouseup events on any touch device (or cumputer). This is also a cross-browser solution.
I have tested in on several devices and it works fast (in combination with the drag and drop feature of ThreeDubMedia (see also http://threedubmedia.com/code/event/drag)). It is a jQuery solution so you can use it only with jQuery libs. I have used jQuery 1.5.1 for it because some newer functions don't work properly with IE9 and above (not tested with newer versions of jQuery).
Before you add any drag or drop operation to an event you have to call this function first:
simulateTouchEvents(<object>);
You can also block all components/children for input or to speed up event handling by using the following syntax:
simulateTouchEvents(<object>, true); // ignore events on childs
Here is the code i wrote. I used some nice tricks to speed up evaluating things (see code).
function simulateTouchEvents(oo,bIgnoreChilds)
{
if( !$(oo)[0] )
{ return false; }
if( !window.__touchTypes )
{
window.__touchTypes = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
}
$(oo).bind('touchstart touchmove touchend', function(ev)
{
var bSame = (ev.target == this);
if( bIgnoreChilds && !bSame )
{ return; }
var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
e = ev.originalEvent;
if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type] )
{ return; } //allow multi-touch gestures to work
var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false;
if( b || window.__touchInputs[ev.target.tagName] )
{ return; } //allow default clicks to work (and on inputs)
// https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(newEvent);
e.preventDefault();
ev.stopImmediatePropagation();
ev.stopPropagation();
ev.preventDefault();
});
return true;
};
What it does:
At first, it translates single touch events into mouse events. It checks if an event is caused by an element on/in the element that must be dragged around. If it is an input element like input, textarea etc, it skips the translation, or if a standard mouse event is attached to it it will also skip a translation.
Result:
Every element on a draggable element is still working.
Happy coding, greetz,
Erwin Haantjes
I'm using the YUI slider that operates with mouse move events. I want to make it respond to touchmove events (iPhone and Android). How can I produce a mouse move event when a touchmove event occurs? I'm hoping that just by adding some script at the top that touchmove events will get mapped to the mouse move events and I won't have to change anything with the slider.
I am sure this is what you want:
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type = "mousemove"; break;
case "touchend": type = "mouseup"; break;
default: return;
}
// initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
I've captured the touch events and then manually fired my own mouse events to match. Although the code isn't particularly general purpose as is, it should be trivial to adapt to most existing drag and drop libraries, and probably most existing mouse event code. Hopefully this idea will come in handy to people developing web applications for the iPhone.
Update:
In posting this, I noticed that calling preventDefault on all touch events will prevent links from working properly. The main reason to call preventDefault at all is to stop the phone from scrolling, and you can do that by calling it only on the touchmove callback. The only downside to doing it this way is that the iPhone will sometimes display its hover popup over the drag origin. If I discover a way to prevent that, I'll update this post.
Second Update:
I've found the CSS property to turn off the callout: -webkit-touch-callout.
I finally found a way to get this working using Mickey's solution but instead of his init function. Use the init function here.
function init() {
document.getElementById('filter_div').addEventListener("touchstart", touchHandler, true);
document.getElementById('filter_div').addEventListener("touchmove", touchHandler, true);
document.getElementById('filter_div').addEventListener("touchend", touchHandler, true);
document.getElementById('filter_div').addEventListener("touchcancel", touchHandler, true);
}
If you see 'filter_div' is the chart area where we have the chart range filter and only in that area do we want to rewrite our touch controls!
Thank you Mickey. It was a great solution.
Along the lines of #Mickey Shine's answer, Touch Punch provides mapping of touch events to click events. It's built to put this support into jQuery UI, but the code is informative.
For future users, who comeback here the following code might be used :
var eventMap = {};
(function(){
var eventReplacement = {
"mousedown": ["touchstart mousedown", "mousedown"],
"mouseup": ["touchend mouseup", "mouseup"],
"click": ["touchstart click", "click"],
"mousemove": ["touchmove mousemove", "mousemove"]
};
for (i in eventReplacement) {
if (typeof window["on" + eventReplacement[i][0]] == "object") {
eventMap[i] = eventReplacement[i][0];
}
else {
eventMap[i] = eventReplacement[i][1];
};
};
})();
And then in the events use like following :
$(".yourDiv").on(eventMap.mouseup, function(event) {
//your code
}
For making #Mickey's code work on Edge and internet explorer, add the following lines in .css of the element where you want the simulation to happen:
.areaWhereSimulationHappens {
overflow: hidden;
touch-action: none;
-ms-touch-action: none;
}
These lines prevent the default touch for edge and IE. But if you add it to the wrong element, then it also disables scroll (which happens by default on edge and IE on touch devices).
I just discovered this code resolving, i'm stuck on this situation in which I would like to put touch events and mouse event:
https://codepen.io/benstl/details/LYQjKvN
I supposed I have to add in te html the touchevents in the line :
div class="cube" onmousedown="grabOn(true)" onmouseup="grabOff()">
and on the javascript on :
document.addEventListener('mouseup', grabOff);
document.addEventListener('mousemove', handleMouseMove);
But there's also the grab function to link to either.