Перетащите перетаскивание на мобильные устройства, используя некоторый код, который переводит событие (включая код), но обычные события не работают - PullRequest
Новая
       17

Перетащите перетаскивание на мобильные устройства, используя некоторый код, который переводит событие (включая код), но обычные события не работают

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

Я использую приведенный ниже код для сенсорного перетаскивания на моем сайте.Однако, хотя части моего кода, которые имеют функцию перетаскивания, работают на iPhone, я все равно не могу прокрутить или переместить страницу.Я могу перетаскивать, но обычные функции сенсорного iPhone больше не нужны!

Я нашел приведенный ниже фрагмент кода в нескольких ответах stackoverflow, поэтому мне интересно, есть ли обходной путь для этого.Я хочу, чтобы можно было перетаскивать их как в Интернете, так и на мобильных устройствах.

Спасибо!

мой код перетаскивания (просто список): 

$(function() {
    $(".drag_me ul").sortable();
});

код для касаниясобытия: 

function touchHandler(event)
{
 var touches = event.changedTouches,
    first = touches[0],
    type = "";

     switch(event.type)
{
    case "touchstart": type = "mousedown"; break;
    case "touchmove":  type="mousemove"; break;        
    case "touchend":   type="mouseup"; break;
    default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
                          first.screenX, first.screenY,
                          first.clientX, first.clientY, false,
                          false, false, false, 0/*left*/, null);

first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}

function init()
{
   document.addEventListener("touchstart", touchHandler, true);
   document.addEventListener("touchmove", touchHandler, true);
   document.addEventListener("touchend", touchHandler, true);
   document.addEventListener("touchcancel", touchHandler, true);    
}

Ответы [ 2 ]

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

Я работал над той же проблемой и думаю, что только что подошел.Я удалил кишки touchHandler и использовал их для заполнения обратного вызова, который привязывает слушателей событий только к дочерним элементам <div id='stage'>.Ниже мой код с использованием jquery.Надеюсь, это поможет! 

function init(){


 $("#stage").children().bind('touchstart touchmove touchend touchcancel', function(){
    var touches = event.changedTouches,    first = touches[0],    type = ""; 
    switch(event.type){    
      case "touchstart": type = "mousedown"; 
    break;    
      case "touchmove":  type="mousemove"; 
    break;            
      case "touchend":   type="mouseup"; 
    break;    
      default: return;
    }

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                      first.screenX, first.screenY,
                      first.clientX, first.clientY, false,
                      false, false, false, 0/*left*/, null);
    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
  });
}
0 голосов
/ 09 ноября 2011

Эта функция кода запрещает использование функции прокрутки по умолчанию: 

event.preventDefault();

Поскольку этот объект события привязан к документу, все собственные прокрутки отключены.

Если вы хотитечтобы разрешить прокрутку страницы, добавьте слушателей событий к потомку элемента документа (таким образом, если пользователь прокручивает область, отличную от сортируемого контейнера, он сможет нормально прокручивать страницу).

Изменить: 

function init()
{
   document.addEventListener("touchstart", touchHandler, true);
   document.addEventListener("touchmove", touchHandler, true);
   document.addEventListener("touchend", touchHandler, true);
   document.addEventListener("touchcancel", touchHandler, true);    
}

На: 

function init()
{
   $('#sortable_container').bind('touchstart touchmove touchend touchcancel', touchHandler); 
}
...