Custom drag and drop with D3

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<title>Drag And Drop</title>
</head>
<body>

//-------------------------------------------------
// Functional draft of a dragAll plugin 
//-------------------------------------------------

(function(){d3.experiments = {};

d3.experiments.dragAll = function() {
    this.on("mousedown", function(){grab(this, event)})
        .on("mousemove", function(){drag(this, event)})
        .on("mouseup", function(){drop(this, event)});
};

var trueCoordX = null,
    trueCoordY = null,
    grabPointX = null,
    grabPointY = null,
    dragTarget = null;

function grab(element, event){
    dragTarget = event.target;
    //// send the grabbed element to top
    dragTarget.parentNode.appendChild( dragTarget );
    d3.select(dragTarget).attr("pointer-events", "none");
    //// find the coordinates
    var transMatrix = dragTarget.getCTM();
    grabPointX = trueCoordX - Number(transMatrix.e);
    grabPointY = trueCoordY - Number(transMatrix.f);
};

function drag(element, event){
    var newScale = vizSVG.node().currentScale;
    var translation = vizSVG.node().currentTranslate;
    trueCoordX = (event.clientX - translation.x)/newScale;
    trueCoordY = (event.clientY - translation.y)/newScale;
    if (dragTarget){
        var newX = trueCoordX - grabPointX;
        var newY = trueCoordY - grabPointY;
        d3.select(dragTarget).attr("transform", "translate(" + newX + "," + newY + ")");
    }
};

//-------------------------------------------------
// Example of use 
//-------------------------------------------------

//// bind event to the root SVG
var vizSVG = d3.select("#viz")
    .append("svg:svg")
    .attr("width", 400)
    .attr("height", 300)
    .call(d3.experiments.dragAll);
    
vizSVG.append("svg:circle")
    .attr("id", "blueCircle")
    .attr("cx", 50)
    .attr("cy", 140)
    .attr("r", 40)
    .attr("fill", "blue");
    
vizSVG.append("svg:rect")
    .attr("id", "redRectangle")
    .attr("x", 100)
    .attr("y", 100)
    .attr("width", 100)
    .attr("height", 80)
    .attr("fill", "red");

</script>
   
</body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js