0

在下面的站点中，有白色的矩形，里面有锚。由于 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);

我将非常感谢解决此问题的任何和所有帮助！

我想要做的是让可拖动元素的子元素在多点触控上可点击。

4

0 回答 0