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

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

$().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);