在下面的站点中,有白色的矩形,里面有锚。由于 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);
我将非常感谢解决此问题的任何和所有帮助!
我想要做的是让可拖动元素的子元素在多点触控上可点击。