javascript - jQuery UI .draggable()要素の子はクリックできません

Question

以下のサイトでは、アンカーが内側にある白い四角形があります。白い四角形は、jQuery UI のおかげでドラッグ可能です。しかし、マルチタッチ/モバイルでは、その中のアンカーをクリックできなくなりました。

リンクを試してみてください。カード (.dataCard) / 白い四角形はマルチタッチでドラッグできますが、.dataCard 内のアンカーはマルチタッチ デバイスではクリックできなくなりました。

それはなぜですか、どうすれば修正できますか?

サイトへのリンクはこちら

そして、ここに私のドラッグ可能なコードがあります:

$('.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");
  eventTypes = {
    touchstart: "mousedown",
    touchmove: "mousemove",
    touchend: "mouseup"
  };

  simulatedEvent.initMouseEvent(
    eventTypes[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);

これを修正するためのすべての助けをいただければ幸いです。

私がやろうとしているのは、ドラッグ可能な要素の子をマルチタッチでクリックできるようにすることです。