0 Replies Latest reply on Jan 14, 2014 11:32 AM by jaketherake222222

    Touchstart, Touchmove & Touchend Help Please


      Hi There.


      I have been working on on a Drag Touch start, move and end project.


      What I am trying to do is move / drag an item on an ipad so that when it reaches a certain area on the stage it creates an event- for example. Hide or show an object.


      I have had limited sucess with the code below. But I have found that it does not always work. It depends where the "iTouch Move Item" is related to the "Hot" area.


      I am trying to work out a way of creating events when the "Touch Move Item" is at a certain location on the stage.


      Please note... I can not and will not use any extra plug ins. (Sorry -  Not being stubborn).


      I have tried to write a script that if the "Touch Move Item" is less than 100px X and is less than 100px Y but more than 20px X and more than 20px Y then event happens.


      The only way I have been able to do it is by adding other objects "hota & hotB"


      Any help or advice would be cool


      Please see the code that I have done so far.


      Cheers Jake









          document.ontouchmove = function(e){ e.preventDefault(); }






      //Var for items. Hot - Hot spots

      var TouchMoveItem = $(this.lookupSelector("TouchMoveItem"));

      var hota = $(this.lookupSelector("hota"));

      var hotb = $(this.lookupSelector("hotb"));






      //Get vqr for width and hight of TouchMoveItem



      var TouchMoveItemWidth =  parseFloat($(TouchMoveItem)[0].style.width);

      var TouchMoveItemHeight =  parseFloat($(TouchMoveItem)[0].style.height);




      $(TouchMoveItem)[0].addEventListener('touchstart', function(e) {

        }, false);






      $(TouchMoveItem)[0].addEventListener('touchmove', function(e) {

      $(TouchMoveItem)[0].style.left = "" + ((e.touches[0].pageX)-TouchMoveItemWidth/2)+"px";

      $(TouchMoveItem)[0].style.top = "" + ((e.touches[0].pageY)-TouchMoveItemHeight/2)+"px";





      if (((TouchMoveItem)[0].style.left > ((hota)[0].style.left) && ((TouchMoveItem)[0].style.top > (hota)[0].style.top)) 

      && (((TouchMoveItem)[0].style.left < (hotb)[0].style.left) && ((TouchMoveItem)[0].style.top < (hotb)[0].style.top))){









      }, false);








      $(TouchMoveItem)[0].addEventListener('touchend', function(e) {





      }, false);