I'm dragging a single rectangle ... it drags correctly the first time, but the second time it jumps back to its starting point at the start of the drag.
I notice many drag examples on the net drag circles, where there is a fortunate correspondance between the point and the cx, cy. But with a rectangle there is an offset, which looks like it is supposed to be handled using the objects data. But I'm not sure exactly how.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
svg {
background-color: linen;
}
</style>
</head>
<body>
<svg id="svgc" width="450" height="450">
</svg>
<script>
d3.select("#svgc").selectAll("rect")
.data([{x: 100, y:200}])
.enter()
.append("rect")
.attr("x",function(d) {return d.x; })
.attr("y",function(d) {return d.y; })
.attr("width",40)
.attr("height",80)
.attr("fill","steelblue");
makeDragDrop();
function makeDragDrop() {
var widget=undefined, color=undefined;
var dragR=d3.drag()
.on("start", function() {
color=d3.select(this).attr("fill");
widget=d3.select(this).attr("fill","lime");
})
.on("drag", function(d) {
d3.select(this)
.attr("x",d3.event.x)
.attr("y",d3.event.y);
})
.on("end", function() {
widget.attr("fill",color);
widget=undefined;
})
dragR(d3.select("#svgc").selectAll("rect"));
}
</script>
</body>
</html>
