在SVG元素中的圆上检测touchmove

Question

我制作了一个显示SVG元素（嵌入HTML）的网站，并希望允许用户<circle>通过用鼠标或手指在其上拖动来连接其中的点（元素）。

通过监听mousedown和mouseover事件并向lineSVG中添加元素，可以在桌面上完美地工作。

我加了听众touchstart，touchmove，touchend和touchcancel，但我遇到了问题。似乎touchmove从来没有在Android手机上的Google Chrome和Android平板电脑上的Google Chrome上触发过，只有当我松开手指时才会触发。

编辑：这是我的小提琴代码：http : //jsfiddle.net/s5vcfzbq/您可以用鼠标从一个圆圈拖动到另一个圆圈来连接它们，但是在触摸屏上不起作用。

Answer 1

我推荐InteractJS来处理触摸事件。它没有任何依赖关系，可以处理拖动、旋转和多点触控等。

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

这是我在Codepen上使用 SVG拼凑而成的演示