HTML5:在X轴上拖放而不褪色？

Question

我一直在寻找HTML5的拖放示例/教程,但到目前为止所有这些都涉及一个对象,当它被拖动并且不受任何轴约束时会逐渐消失.我想知道是否可以拖动实际物体本身而不是它的鬼魂以及我是否可以将它约束到X或Y轴？

谢谢!

Answer 1

是的,很容易,自己写.

elem.onmousedown = function(e) {
    e = e || window.event;
    var start = 0, diff = 0;
    if( e.pageX) start = e.pageX;
    else if( e.clientX) start = e.clientX;

    elem.style.position = 'relative';
    document.body.onmousemove = function(e) {
        e = e || window.event;
        var end = 0;
        if( e.pageX) end = e.pageX;
        else if( e.clientX) end = e.clientX;

        diff = end-start;
        elem.style.left = diff+"px";
    };
    document.body.onmouseup = function() {
        // do something with the action here
        // elem has been moved by diff pixels in the X axis
        elem.style.position = 'static';
        document.body.onmousemove = document.body.onmouseup = null;
    };
}