javascript - children of jQuery UI .draggable() element not clickable -
in site below, there white rectangles anchors inside them. white rectangles draggable jquery ui. anchors inside them not clickable on multi-touch / mobile.
try out link, cards (.datacard) / white rectangles, draggable on multi-touch, anchors inside .datacard no longer clickable in multi-touch devices.
why , how can fix that?
and here draggable code:
$('.datacard').draggable({ axis:'x', start:function(event){ event.stoppropagation(); }, drag:function(event){ // 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); i appreciate , in fixing this!
what i'm trying children of draggable elements clickable on multi-touch.
Comments
Post a Comment