jQuery Mobile Iphone应用程序

San*_*eep 2 jquery html5 draggable ios jquery-mobile

我正在尝试为iPhone创建一个HTML5 Web应用程序.我正在使用jQuery Mobile.我的应用程序涉及画布.它就像一个使用画布渲染草图的绘图应用程序.用户可以从任何方向在屏幕上滑动,应用程序应该能够找出位置,然后在点上画线.

jQuery Mobile仅为滑动控件提供以下一些基本事件,但我认为我需要对滑动进行更多控制,因为用户可以在任何方向滑动,并且可以是任何像素长.另一方面,我应该能够捕获大部分点,这样我就可以更清晰,更准确地想象绘图.

tap
Triggers after a quick, complete touch event.
taphold
Triggers after a held complete touch event (close to one second).
swipe
Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration.
swipeleft
Triggers when a swipe event occurred moving in the left direction.
swiperight
Triggers when a swipe event occurred moving in the right direction.
Run Code Online (Sandbox Code Playgroud)

我是否应该在画布中为iOs应用程序创建绘图应用程序?任何帮助将不胜感激.

Jas*_*per 6

您在jQuery Mobile Documentation的Event页面上遗漏的一些事件是虚拟事件:http://jquerymobile.com/demos/1.0/docs/api/events.html

vmousedown
    Normalized event for handling touchstart or mousedown events

vmousemove
    Normalized event for handling touchmove or mousemove events

vmouseup
    Normalized event for handling touchend or mouseup events

vmousecancel
    Normalized event for handling touch or mouse mousecancel events
Run Code Online (Sandbox Code Playgroud)

我会使用该vmousedown事件开始跟踪光标的移动,vmousemove继续跟踪光标的路径,并vmouseup完成跟踪光标的移动.

一个简单的例子是:

//setup a variable to store the cursor's movement
var tracks = [];

//bind to the three events described above
$(document).bind('vmousedown vmousemove vmouseup', function (event) {

    //check to see what event is being fired
    if (event.type == 'vmousedown') {

        //if the `vmousedown` event is fired then reset the value of the `tracks` variable and add the first point to the variable
        tracks = [{ x : event.pageX, y : event.pageY}];
    } else if (event.type == 'vmousemove') {

        //if the `vmousemove` event is fired then add a new point to the `tracks` variable
        tracks.push({ x : event.pageX, y : event.pageY});
    } else if (event.type == 'vmouseup') {

        //if the `vmouseup` event is fired then the user is done drawing and you can draw their line for them
    }
});
Run Code Online (Sandbox Code Playgroud)