Проблема с touchmove в default android browser?

Нужно сделать, чтобы darg and drop работал в браузере по умолчанию андроида (называется Интернет).

Есть демо


Если использовать chrome, то все работает как надо(при перетаскивании элемент движется). Если же использовать браузер по умолчанию, то во время драга ничего не отобразится, а после события touchend элемент окажется на новом месте, то есть обработчик события touchmove отработает. Как сделать, чтобы во время перетаскивания отображалась анимация? (так же, как это выглядит в хроме).

<html>
  <head>
    <meta charset=utf-8 />
    <title>Drag n' drop touch demo - sewa.se</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
      .draggable {
        position: absolute;
        left: 30px;
        top: 30px;
        width: 60px;
        height: 60px;
        margin-left: -30px;
        margin-top: -30px;

        color: #FFF;
        font: bold 16px Helvetica,Arial,Sans-serif;
        text-align: center;
        background-color: #ABF;
        border: 3px solid #669;
      }
    </style>
  </head>
  <body>
    <div class="draggable">Drag me!</div>
    <div class="draggable">Drag me!</div>
  </body>
    <script type="text/javascript">
      $.fn.draggable = function() {
        var offset = null;
        var start = function(e) {
          var orig = e.originalEvent;
          var pos = $(this).position();
          offset = {
            x: orig.changedTouches[0].pageX - pos.left,
            y: orig.changedTouches[0].pageY - pos.top
          };
        };
        var moveMe = function(e) {
          e.preventDefault();
          var orig = e.originalEvent;
          $(this).css({
            top: orig.changedTouches[0].pageY - offset.y,
            left: orig.changedTouches[0].pageX - offset.x
          });
        };
        this.bind("touchstart", start);
        this.bind("touchmove", moveMe);
      };

      $(".draggable").draggable();
    </script>
</html>
  • Вопрос задан
  • 5623 просмотра
Пригласить эксперта
Ответы на вопрос 1
Возможно вам лучше вместо `changedTouches[]` воспользоваться `touches[]`
// ..
 top: orig.touches[0].pageY - offset.y,
left: orig.touches[0].pageX - offset.x



И пару советов:
— не используйте `.css()`, сохраняйте референс на стиль и при движении меняйте свойства `style.left = «Xpx»`. А ещё лучше использовать на андоиде `webkitTransform / translate`
— используйте отложенное перемещение — вот старый гист, но что бы понять идею с `requestAnimationFrame`: dragger
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы