Problem with touchmove in default android browser?

I

isxaker2013-11-07 10:25:12

JavaScript

isxaker, 2013-11-07 10:25:12

You need to make darg and drop work in android's default browser (called the web).
There is a demo
If you use chrome, then everything works as it should (when dragging the element moves). If you use the default browser, then nothing will be displayed during the drag, and after the touchend event, the element will be in a new place, that is, the touchmove event handler will work. How can I make it show animation while dragging? (same as it looks in chrome).

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

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander Keith, 2013-11-07
@tenbits

Maybe you should use `touches[]` instead of `changedTouches[]`

// ..
 top: orig.touches[0].pageY - offset.y,
left: orig.touches[0].pageX - offset.x

And a couple of tips:
- don't use `.css()`, save the reference to the style and change the properties `style.left = "Xpx"` as you move. Better yet, use `webkitTransform / translate` on android
- use delayed move - here is an old gist, but to understand the idea with `requestAnimationFrame`: dragger