Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > d&d on touch devices

Автор: Evghenusi 24.11.2013, 20:06

Здравствуйте.
При повторном перемещении блока, он "отпрыгивает" в левый верхний угол.
Подскажите пожалуйста, в чём кроется ошибка?

Код


window.onload = function()
{
    var offset;
    var els = document.getElementById('draggable');
    
    els.addEventListener("touchstart", function(e)
    {
        var left = e.changedTouches[0].clientX+document.body.scrollLeft-(parseInt(this.style.left)|0);
        var top = e.changedTouches[0].clientY+document.body.scrollTop-(parseInt(this.style.top)|0);
        
        offset = {
            x: e.changedTouches[0].pageX - left,
            y: e.changedTouches[0].pageY - top
        };
    });

    els.addEventListener("touchmove", function(e)
    {
        e.preventDefault();
        this.style.cssText = 'top:'+(e.changedTouches[0].pageY - offset.y)+'px;'
                            +'left:'+(e.changedTouches[0].pageX - offset.x)+'px';
    });
}

http://jsfiddle.net/W9LpC/show

Автор: CruorVult 25.11.2013, 14:27

На touchstart нужно только единожды установить offset. А у тебя при повторном touchstart смещение устанавливается как текущее положение мышки, соответственно и разница будет 0.
http://jsfiddle.net/W9LpC/3/

Ну а вообще, можно инициализировать разницу в 0 сразу на window.onload

Код


var offset = {
                x: 0,
                y: 0
            };

Автор: Evghenusi 25.11.2013, 15:05

CruorVult, я правильно понял, если объявить offset={x:0,y:0} , то функция на событие "touchstart" не нужна?

Добавлено через 1 минуту и 1 секунду

Цитата(CruorVult @ 25.11.2013, 14:27

)

А у тебя при повторном touchstart смещение устанавливается как текущее положение мышки

Вы правильно подметили, переписывалось с декстопного варианта)

Добавлено через 7 минут и 15 секунд
блин, так и offset не нужен получается.
Остаётся:

Код


window.onload = function()
{
    var els = document.getElementById('draggable');
    els.addEventListener("touchmove", function(e)
    {
        e.preventDefault();
        this.style.cssText = 'top:'+e.changedTouches[0].pageY+'px;'
                            +'left:'+e.changedTouches[0].pageX+'px';
    });
}