2 Replies Latest reply on Nov 22, 2012 12:48 AM by Aiesyaah

    Drag and drop for Tablet

    Aiesyaah Level 1

      Hi!

       

      Does anyone has a basic set of codes for drag and drop in tablets? My elements bunches together when I dragged it. And I can't drop it into the area (1 of the 3 boxes) I want it to be at.

       

      I want some animation to be played after I finished dragging all the elements into any of the boxes.

       

      The reset button also does not work.

       

      I also found these link: https://github.com/furf/jquery-ui-touch-punch . I tried implementing it in my .html file (edit in Notepad++), but this does not seem to register in the codes. This happened even after I saved the file. When I opened the file again, those lines of jquery codes that I added in are gone. As if I did not make any changes to the file.

       

      Here are my codes:

       

       

       

      // _1: touchstart, touchmove

      $(document).bind("touchstart touchmove", function(a) {

        //Disable scrolling by preventing default touch behaviour

        a.preventDefault();

        var orig1 = a.originalEvent;

        var x = orig1.changedTouches[0].pageX;

        var y = orig1.changedTouches[0].pageY;

        sym.$("_1").css({top: y, left: x});

      });

       

       

      // _1: touchend

      $(document).bind("touchend", function(a) {

        //Disable scrolling by preventing default touch behaviour

        a.preventDefault();

        var orig1 = a.originalEvent;

        var x = orig1.changedTouches[0].pageX;

        var y = orig1.changedTouches[0].pageY;

        sym.$("_1").css({top: y, left: x});

      });

       

       

       

       

      //test _2: touchstart, touchmove

      $(document).bind("touchstart touchmove", function(b) {

        //Disable scrolling by preventing default touch behaviour

        b.preventDefault();

        var orig2 = b.originalEvent;

        var x = orig2.changedTouches[0].pageX;

        var y = orig2.changedTouches[0].pageY;

        sym.$("_2").css({top: y, left: x});

      });

       

       

      // _2: touchend

      $(document).bind("touchend mouseup", function(b) {

        //Disable scrolling by preventing default touch behaviour

        b.preventDefault();

        var orig2 = b.originalEvent;

        var x = orig2.changedTouches[0].pageX;

        var y = orig2.changedTouches[0].pageY;

        sym.$("_2").css({top: y, left: x});

      });

       

       

       

       

      //_3: touchstart, touchmove

      //sym.$("_3").css({"margin-left": "-70px", "margin-top": "-70px"});

       

       

      $(document).bind("touchstart touchmove", function(c) {

        c.preventDefault();

        var x = c.originalEvent.touches[0].pageX;

        var y = c.originalEvent.touches[0].pageY;

        sym.$("_3").css({top: y, left: x});

      });

       

       

      //test _3: touchend

      $(document).bind("touchend mouseup", function(c) {

        //Disable scrolling by preventing default touch behaviour

        c.preventDefault();

        var orig3 = c.originalEvent;

        var x = orig3.changedTouches[0].pageX;

        var y = orig3.changedTouches[0].pageY;

        sym.$("_3").css({top: y, left: x});

      });