Circle touch detection in svg element

Question

I created a website that displays an SVG element (embedded in HTML), and you want to allow users to connect dots ( <circle>) to it by dragging them with the mouse or finger over them.

Listening to events mousedownand mouseoveradding elements lineto the SVG, this works great on the desktop.

I added listeners in touchstart, touchmove, touchendand touchcancel, but I ran into problems. It touchmovenever seems to run on Google Chrome on my Android phone and on Google Chrome on my Android tablet, it works when I remove my finger.

Edit: Here is my code in the fiddle: http://jsfiddle.net/s5vcfzbq/ You can drag the mouse from circle to circle to connect them, but it doesn’t work on touch screens.

Answer 1

I recommend InteractJS for handling touch events. It has no dependencies and handles drag, rotation and multi-touch, etc.

interact('.drag-and-resize').draggable({
   snap: {
   targets: [
    { x: 100, y: 200 },
    function (x, y) { return { x: x % 20, y: y }; }
   ]}
}).resizable({
    inertia: true
});

Here is a demo that I put together Codepen using SVG