Touchstart, Touchmove & Touchend Help Please

Question

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

Answer 1

im having the same problem... any luck of finding an answer?