Let's allow our tablet users to drag-n-drop our circles with the following steps:
By default, there is a selection highlighted in the
canvas
element in iOS devices. We want to get rid of this highlighted part to make the dragging interaction smooth. Add the following CSS rules to thecanvas
CSS. Please note that we use thewebkit
vendor prefix here because this rule is specific forwebkit
at the time of writing this book:canvas { /* for iOS devices */ -webkit-tap-highlight-color: transparent; }
Open the
untangle.input.js file
. We bind the mouse events on the Canvas in the previous step. Now we add the support for touch events. We usedMouseEvent.pageX
andpageY
to calculate the mouse position. With touch devices, there can be multiple touches. We modify our code to add the touch support:$("#game").bind("mousedown touchstart", function(e) { // disable default drag to scroll behavior e.preventDefault(); // touch or mouse position ...