drag and drop in mobile browsers

Asked by Fintan Boyle

Hi,
I'm evaluating if jeash is an option for creating a drag and drop style educational activity that can be viewed in mobile browsers. I created a simple test that works fine in regular browsers (chrome,ff,safari) on my Macbook but the same test doesn't work properly when I try it in my iPad's web browser or my htc desire web browser.

Here is a link to the test:
http://fboyle.com/dev/jeash/

I thought maybe it was something to do with the 'ontouchmove' event because mouse down and up events seem to work fine - only the startDrag() part doesn't work. I added a line to disable the default touchmove behaviour of the page but that doesn't seem to be the issue.

I basically want to be able to do this kid of thing:
http://easeljs.com/examples/dragAndDrop.html

here is the test file:

class Main extends Sprite {

 var ellipse:MovieClip;

 function new() {
  super();
  addEventListener(Event.ADDED_TO_STAGE, init);
 }

 function init(e){

  ellipse = new MovieClip();
        ellipse.graphics.beginFill( 0xFF9900, 1 );
        ellipse.graphics.lineStyle( 0, 0xCCCCCC );
        ellipse.graphics.drawEllipse( 0, 0, 100, 60 );
        ellipse.graphics.endFill();

        ellipse.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  ellipse.addEventListener(MouseEvent.MOUSE_UP, onUp);

        this.addChild( ellipse );

 }

 function onDown(e){
  trace("onDown");
  ellipse.startDrag();
 }

 function onUp(e){
  trace("onUp");
  ellipse.stopDrag();
 }

 static function main() {
  Lib.current.stage.addChild( new Main() );
 }
}

thanks,

Fintan

Question information

Language:
English Edit question
Status:
Open
For:
jeash Edit question
Assignee:
No assignee Edit question
Last query:
Last reply:
Revision history for this message
Niel Drummond (niel-drummond) said :
#1

Hey Fintan,

Sorry to hear that it doesn't work on those platforms, it's probably due to touch events, which are not implemented in jeash, as the browser still needs to receive mousemove events to do a startdrag.

Unfortunately, I don't own a tablet, and my phone seems to work with your demo.. so you will likely need to wait until I can borrow a device before I can fix this, or take a shot at implementing it yourself.

- Niel

Revision history for this message
Fintan Boyle (fintanboyle) said :
#2

maybe I'll have a go at it :-)

I think this class in Easeljs is a good reference:
https://github.com/gskinner/EaselJS/blob/master/src/easeljs/ui/Touch.js

It is basically mapping touch start/move/end to mouse down/move/up

only works for iOS though.

what phone do you have by the way? It isn't really essential at this stage that the activity works in mobile browsers I'm just trying to do some future proofing if possible. I have to target flash but am anticipating a request for it to work on tablet browsers later.

Revision history for this message
Niel Drummond (niel-drummond) said :
#3

Thanks for the links, would also be nice seeing some of your work when it gets done. :-)

Revision history for this message
Fintan Boyle (fintanboyle) said :
#4

I made some modifications to jeash.Lib and Stage.hx and have the example working on my iPad now.

I'll post the patch later when i have time to tidy it up a little.

seems to work nicely but needs testing :-)

Revision history for this message
Fintan Boyle (fintanboyle) said :
#5

Can you help with this problem?

Provide an answer of your own, or ask Fintan Boyle for more information if necessary.

To post a message you must log in.