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

    Touchstart, Touchmove & Touchend Help Please

    jaketherake222222 Level 1

      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

       

      >>>>>>>>>>>>>>>>>>>

       

       

       

      $().ready(function(){

       

       

          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"));

       

       

      sym.$("box").show();

       

       

      //Get vqr for width and hight of TouchMoveItem

       

       

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

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

      //touchstart

       

       

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

        }, false);

      //touchmove

       

       

       

       

      $(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))){

       

       

      sym.$("box").hide();

       

       

      }

       

       

      }, false);

       

       

      //touchend

       

       

       

       

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

       

       

       

       

      }, false);