I'm trying to implement some drag and drop functionality on a sortable group of elements with d3 and svg. Basically, after dragging, the positions of all elements are updated with their new positions, calculated according to where the dragged element has been dropped. In order to accomplish what I need I'm making use of the
dragend callback that d3 provides.
I prepared a simplified version of my scenario here:
As you can see, each of the draggable elements contains an svg hyperlink. The link works in Chrome and Safari, but is not clickable in FF.
From my googling so far it seems that the problem stems from the propagation of the mouseup part of the click event, which I guess does not bubble up properly in FF. I'm using d3 version 2.7.4.
I've tried the same code in the latest version of d3, but the problem persists there as well.
This is not as much a solution as a workaround using a hack.
I basically check whether the element that has been dropped has actually been moved and whether the browser is Firefox. If both conditions are true and if the click target was a link I redirect to the url of the link.
Here is an updated JSFiddle version using the workaround and the latest version of d3: