Detect touchmove on circle in svg element

Question

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

By listening to the mousedown and mouseover events and adding line elements to the SVG this works perfectly on the desktop.

I added listeners to touchstart, touchmove, touchend and touchcancel but I ran into issues. It seems like touchmove is never triggered on Google Chrome on my Android phone and on Google Chrome on my Android tablet it is only triggered when I remove my finger.

Edit: Here's my code in a fiddle: http://jsfiddle.net/s5vcfzbq/ You can drag with your mouse from circle to circle to connect them, but it doesn't work on touch screens.

Answer 1

I recommend InteractJS to handle touch events. It doesn't have any dependencies and handles dragging, rotation and multitouch 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 I cobbled together on Codepen using SVGs