IPAD 拖动事例(也支持鼠标)

2012-07-26

IPAD 拖动例子(也支持鼠标)htmlhead titleiPad Touch Test/title meta nameviewport content

IPAD 拖动例子(也支持鼠标)
<html>
<head>
<title>iPad Touch Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
    <div id="trace"></div>

    <div style="width:400px;height:400px; position:absolute ;left:100px; background:red" id="test">
         <div onmousemove="flip(event);" style="width:100px;height:100px; background:#fff">Blue</div>

    </div>


</body>

</html>

<script language=javascript >

$.fn.draggable = function(action) {

    var offset = null;

    //touch drag
    var start = function(e) {
        var orig = e.originalEvent;
        var pos = $(this).position();
        offset = {
          x: orig.changedTouches[0].pageX - pos.left,
          y: orig.changedTouches[0].pageY - pos.top
        };
    };
    var move = function(e) {
        e.preventDefault();
        var orig = e.originalEvent;
        $(this).css({
          top: orig.changedTouches[0].pageY - offset.y,
          left: orig.changedTouches[0].pageX - offset.x
        });
    };

    // mouse drag
    o = document.getElementById($(this).attr("id"));
    o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
    o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
    o.orig_index = o.style.zIndex;

    var drag = function(a)
    {
        this.style.cursor = "move";
        var d=document;
        if(!a)a=window.event;
        var x = a.clientX+d.body.scrollLeft-o.offsetLeft;
        var y = a.clientY+d.body.scrollTop-o.offsetTop;

        if(o.setCapture)
            o.setCapture();
        else if(window.captureEvents)
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

        d.onmousemove = function(a)
        {
            if(!a)a=window.event;
            o.style.left = a.clientX+document.body.scrollLeft-x;
            o.style.top = a.clientY+document.body.scrollTop-y;
            o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
            o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
        }

        d.onmouseup = function()
        {
            if(o.releaseCapture)
                o.releaseCapture();
            else if(window.captureEvents)
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            d.onmousemove = null;
            d.onmouseup = null;
            d.ondragstart = null;
            d.onselectstart = null;
            d.onselect = null;
            o.style.cursor = "normal";
            o.style.zIndex = o.orig_index;
        }
    }

    if (action == "disabled")
    {
        this.unbind("touchstart", start);
        this.unbind("touchmove", move);
        this.unbind("mousedown", drag);
        o.style.cursor = "normal";
    }
    else
    {
        this.bind("touchstart", start);
        this.bind("touchmove", move);
        this.bind("mousedown", drag);
    }

};

function flip(e)
{
    $("body").css("background","blue");
    e.stopPropagation();
}

    $("#test").draggable();

function trace(msg)
{
    $("#trace").append( "<br>" + msg) ;
}

</script>

热点排行

移动开发

IPAD 拖动事例(也支持鼠标)