Изменить размер HTML-элемента, используя прикосновения - PullRequest
Новая
       6

Изменить размер HTML-элемента, используя прикосновения

8 голосов
/ 24 ноября 2011

Использование не более чем библиотека jQuery;Я пытаюсь изменить размер DIV при перетаскивании его правой границы.Он отлично работает с мышью, но я не могу заставить его работать на сенсорном устройстве.Я думаю, что это связано с e.touches.

, который я пробовал использовать e.touches и e.targetTouches;ни один из них, кажется, не работает.

Я реализую часть touch events правильно?Чего мне не хватает?

Вот скрипка и полный код ниже.

HTML: 

<div class="container"><div class="handle"></div></div>

CSS: 

.container{background:#CCC;width:200px;height:100px;position:relative;overflow:hidden;}
.handle{cursor:e-resize;height:100px;width:2px;position:absolute;top:0;right:0;background:red;}

JS: 

var handle = null;

$(".handle").on('mousedown touchstart', function(e){
    handle = {
        x : e.pageX,
        p : $(this).parent(),
        pw: $(this).parent().width()
    };

    if (e.targetTouches){ //e.touches
        handle.x = e.targetTouches[0].pageX //e.touches[0]
    }

    e.preventDefault();
});

$(document).on({
    'mousemove touchmove':function(e){
        if(handle) {
            if (e.targetTouches){ //e.touches
                handle.p.width(handle.pw+(e.targetTouches[0].pageX - handle.x));  //e.touches[0]               
            }else{
                handle.p.width(handle.pw+(e.pageX - handle.x));                    
            }
        }
        e.preventDefault();
    },
    'mouseup touchend':function(e){
        handle = null;
        e.preventDefault();
    }
});

Любая помощь будет оценена!

Ответы [ 2 ]

5 голосов
/ 24 ноября 2011

Вместо e.targetTouches вы должны использовать e.originalEvent.touches.

Также было бы полезно иметь:

  • gesturechange событие вместе с mousemove touchmove
  • gestureend событие вместе с mouseup touchend
  • gesturestart событие вместе с mousedown touchstart

Еще одним улучшением стало бы перемещение обратного вызова события mousemove документа e.preventDefault() в операторе if, чтобы пользователь мог прокручивать страницу, если дескриптор равен нулю.

1 голос
/ 24 ноября 2011

Я страдал с той же проблемой при создании веб-приложения и обнаружил этот jquery touch плагин , который решил мою проблему.

Скачайте этот плагин и включите его в html-файл, и все готово,Вам не нужно вызывать события touchstart / touchmove.

Если это не сработает, вы можете добавить событие touch следующим образом: 

$('Element').addTouch();

Вызвать метод addTouch() для каждого элемента,что вы хотите ответить на событие касания.

Проверьте эту ссылку для дополнительных параметров загрузки.

...