HTML5：在X轴上拖放而不褪色？ [英] HTML5: Drag/drop on X-axis and without fade?

问题描述

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

I've been looking for drag-and-drop examples/tutorials for HTML5, but all of them so far involve an object that fades as it's being dragged and without being constrained to any axis. I was wondering if it's possible to have the actual object itself be dragged as opposed to a ghost of it and whether I can constrain it to X or Y axis?

谢谢！

推荐答案

是的，很容易，自己写一下。

Yes, easily, by writing it yourself.

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

这篇关于HTML5：在X轴上拖放而不褪色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！