i'm new with jQuery mobile. My problem is that I need to catch vmousemove events in a div, because I need to drag and drop images inside this div, like svg images on google maps.
I got a demo at http://demo.baral.de/test/
I have 3 devices: iphone iOS5 , Android 3.2 on the Samsung tab and Android 2.2.2 as desired by HTC . When I “hang” over the green div, I thought there would be a lot of “vmousemove” until my finger touched the movements on the display.
iphone works:
- vmouseover
- vmousedown
- vmousecancel
- a lot of vmousemove
- vmouseup
It seems perfect to me.
Android 3.2 works:
- vmouseover
- vmousedown
- vmousecancel
- vmousemove
Android 2.2.2 works:
- vmouseover
- vmousedown
- vmousecancel
- vmousemove (1 time)
and after I finished moving, and my finger leaves the screen, which it launches
- a lot of vmousemove
- vmouseup
Is this "normal" for jQuery mobile? An error or just the wrong code?
Thanks!
The code:
<!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> <div data-role="page" data-position="fixed" id="wrapper"> <div id="test" style="width: 200px; height: 200px; background-color: green"></div> <div id="footer" style="border: 1px solid black; width: 200px;"> <ul></ul> </div> </div> <script type="text/javascript"> $("#wrapper").live('pageinit', function() { $("#test").bind('vmouseover vmousedown vmousemove vmouseup vclick vmousecancel', function (event) { $('#footer ul').append("<li>"+event.type+"</li>"); }); }); </script> </body>
source share