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;
    };
}