enabling drag and drop on a touchscreen mobile device

I just recently got an android phone and found that the drag and drop on my site doesn't work! I understand why it wouldn't, but has anyone found a solution to this? I'm using JQuery to implement the D & D...

Asked by: Stuart856 | Posted: 25-01-2022

Answer 1

I used jQuery UI touch punch - it works by hacking the mousedown, mouseup features and replaces them with touchstart, touchend etc.

ABOUT: http://touchpunch.furf.com/

SCRIPT: https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js



<script src="jquery.ui.touch-punch.min.js"></script>

after your jquery UI script file in your header.

Answered by: Paul699 | Posted: 26-02-2022

Answer 2

I used the touchpunch answer above and it worked great. One note on it, though. I found that using the github link on the site (and above):

SCRIPT: https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js

did not work for Android devices running mobile Chrome, but the raw, human readable source from the site did work. This is as of the date of this posting, it may get fixed of course, but in the mean time maybe it will save you a few cycles of debugging.

Answered by: Audrey998 | Posted: 26-02-2022

Answer 3

Old thread I know.......

I have here an solution that respects any input or other element that has to react on 'clicks' (for example inputs) on a draggable element. 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:


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);

 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

Answered by: Daryl614 | Posted: 26-02-2022

Answer 4

The iPhone at least has certain events such as ontouchstart, ontouchend, etc. These are part of webkit, but there is much less information with regards Android than iPhone. I think the answer to this question is that the drag and drop functionality needs to use those events rather than the events you would normally use, or needs to use both.

This article may be of interest - http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html

Answered by: Brooke979 | Posted: 26-02-2022

Answer 5

There is a jQuery drag and drop plugin that has support for mobiles / touch-screen devices:


On a mobile device, you tap to pick up the item and tap to select the drop location. This gets around the issue of drag actions being hijacked by the device / browser.

Answered by: Ryan781 | Posted: 26-02-2022

Answer 6

I found an example that work on my Android tablet touchscreen http://www.quirksmode.org/m/tests/drag.html It use "ontouchstart event"

Answered by: Sam493 | Posted: 26-02-2022

Similar questions

touchscreen - Making interactive touch objects on Android

I've never built a game before, and I've not programmed for Android before but am looking to do so over the summer by building a game. What type of object do I use for a shape that I want the user to be able to drag around the screen for instance using touch gestures? How do I tie together the MotionEvent, View and Graphics2D to make objects drawn on screen that can be interacted with? I imagine this will use Acti...

How to deactivate the touchscreen of android device?

i want to deactivate the touch screen of my android device for some application. Anyone plz help me....... Thanx in adv

touchscreen - screen adjusting ability feature in android

I have an application which is designed for a fixed screen size.But when i install the application on a device with different screen size ,i am not able to view the complete application. Is it possible to allow layout adjustments based on variable screen sizes? ... like setting width with some % of screen size which is decided when application installation is done For eg: 60% of screen size or 60% of relative layout

android - Control rotation of a 3D object using the touchscreen in openGL

I'm a 4th year computer engineering student and have some experience with Android dev. I am working on an application that has a 3D component to it which requires me to be able to rotate it around. I was looking at the example at the android resources site. http://d...

touchscreen - Android multi-touch headaches

I've getting a real problem trying to deal with multi-touch events. Basically I need to detect if someone has released a finger while touching the screen elsewhere. According to this previously answered question, I should be using MotionEvent.ACTION_POINTER_UP MotionEvent.ACTION_UP. As far as...

How to intercept touchscreen events in Android OpenGL ES?

How exactly do you intercept touchscreen events for OpenGL ES games in Android? Also, if the game is 3D, how do you know if the user touched an object in the background? Thanks.

android - Swapping X and Y on my touchscreen

I successfuly installed (after 1 week of work) Android on BeagleBoard C4. As display I use Lilliput 669 with an eGalax Usb TouchController. Everything seems ok with exception of touchscreen which have X and Y axes reverse. I: Bus=0003 Vendor=0eef Product=0001 Version=0210 N: Name="eGalax Inc. USB TouchController" P: Phys=usb-ehci-omap.0-2.2/input0 S: Sysfs=/devices/platform/ehci-omap.0/usb1/1...

iphone - Javascript virtual joystick for touchscreen tablets which use wekbit as browser?

Hey there, i am developing a little game example based on html &amp; javascript. Question is: Does anybody knows about some javascript virtual joystick asset? or: what would be a good approach to code it as simple as possible? this is for a very basic maze game i need the joystick to fire my up(), down(), left(), right() functions. Solution must be exclusively based o...

touchscreen - Android fake touch screen

Is it possible to generate a fake touch at a particular point (say (x,y)) on the screen from the code? There is a button on my activity and I dont want to click it through touch screen? Is there any way to achieve this?

touchscreen - Android touch screen listener problem

i've created this little program to show the user the fingers on the screen, but the problem is that the X,Y values from the other fingers are not being modified. What am I doing wrong? Thank you! public class TestandoActivity extends Activity implements OnTouchListener { /** Called when the activity is first created. */ private TextView txtV; private TextView txtV2; private int nf = 0; private Map&...

Still can't find your answer? Check out these communities...

Android Google Support | Android Community | Android Community (Facebook) | Dev.io Android