children of jQuery UI .draggable() element not clickable

children of jQuery UI .draggable() element not clickable

In the site below, there are white rectangles with anchors inside them.
The white rectangles are draggable thanks to jQuery UI. But now the
anchors inside them are not clickable on multi-touch / mobile.
Try out the link, the cards (.dataCard) / the white rectangles, are
draggable on multi-touch, but the anchors inside .dataCard are no longer
clickable in multi-touch devices.
Why is that and how can I fix that?
Here is a link to the site
And here is my draggable code:
$('.dataCard').draggable({
axis:'x',
start:function(event){
event.stopPropagation();
},
drag:function(event){
// what to do during drag here
},
stop:function(event){
}
});
var originalTopPosition = null;
$('.settings').draggable({
axis:'y',
start:function(event){
originalTopPosition = $(event.target).offset().top;
},
drag:function(event){
if($(event.target).offset().top < originalTopPosition){
return false;
}
else if(($(event.target).offset().top - originalTopPosition) >= 32){
$(event.target).removeClass('animated').removeClass('bounceInUp').addClass('animated').addClass('down');
open = false;
}
}
});
function touchHandler(event){
var touch = event.changedTouches[0];
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
I would greatly appreciate any and all help in fixing this!
What I'm trying to do is get children of draggable elements to be
clickable on multi-touch.