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