An (rather poor) example of drag-drop between separate SVG elements

d3dragdrop.js

(function() {

    var MasterCanvas = function (selector, options) {
        var self = this;
        var svg = d3
            .select(selector)
            .append("svg:svg")
                .attr("width", options.width)
                .attr("height", options.height)
                .classed("master-canvas", true);

        self.svg = svg;
    };
    

    MasterCanvas.prototype.BeginInitialize = function () {
        this.surfaces = [];
    };

    MasterCanvas.prototype.addDragDropSurface = function (selector, options) {
        var surface = new DragDropSurface(selector, this, options);
        this.surfaces.push(surface);
        return surface;
    };

    MasterCanvas.prototype.EndInitialize = function () {
        for(var i = 0; i < this.surfaces.length; i++) {
            this.surfaces[i].Initialize();
        }
    };
    
    var DragDropSurface = function (selector, masterCanvas, options) {
        var self = this;
        self.options = options;
        self.masterCanvas = masterCanvas;
        self.lowerCanvas = masterCanvas
            .svg
            .append("svg")
//                .attr("width", options.width)
//                .attr("height", options.height)
        ;

        self.rect = self.lowerCanvas
            .append("rect")
              .attr("fill", options.color)
              .attr("stroke", "black")
              .on("mouseover", function () { self.mouseOver(selector); })
              .on("mouseout", function () { self.mouseOut(selector); })
              .attr("x", options.x)
              .attr("y", options.y)
              .attr("width", options.width)
              .attr("height", options.height);
    };

    DragDropSurface.prototype.Initialize = function () {
        this.upperCanvas = this.masterCanvas.svg
            .append("svg")
        ;
    };

    var DragNode = function (svgElement) {
        var self = this;
        self.svgElement = svgElement;
        if (svgElement[0][0] instanceof SVGCircleElement) {
            self.xlabel = "cx";
            self.ylabel = "cy";
        } else {
            self.xlabel = "x";
            self.ylabel = "y";
        }

        var drag = d3.behavior.drag()
            .origin(Object)
            .on("drag", function (d,i) { self.dragmove(self, d, i); })
            .on("dragstart", function () { self.dragstart(); })
            .on("dragend", function () { self.dragend(); });

        self.svgElement.call(drag);
    };

    DragNode.prototype.getx = function () {
        return parseInt(this.svgElement.attr(this.xlabel), 10);
    };
    
    DragNode.prototype.gety = function () {
        return parseInt(this.svgElement.attr(this.ylabel), 10);
    };


    DragNode.prototype.dragstart = function (d, i) {
        console.log("dragstart");
    };

    DragNode.prototype.dragend = function (d, i) {
        console.log("dragend");
};

    DragNode.prototype.dragmove = function (self, d, i) {
        var dragged = self.svgElement;
        dragged
            .attr(self.xlabel, function () {
                return self.getx() + d3.event.dx;
      })
            .attr(self.ylabel, function () {
                return self.gety() + d3.event.dy;
          });
};

    DragDropSurface.prototype.addDraggableNode = function (options) {
        var surface = this;
        var dragend = function (d, i) {
            console.log("dragend");
        };

        //var svgElement = this.upperCanvas
        //    .append("svg:circle")
        //    .attr("cx", 100)
        //    .attr("cy", 100)
        //    .attr("fill", options.color)
        //    .attr("r", options.r)

        var svgElement = this.upperCanvas
            .append("svg:rect")
            .attr("x", options.x)
            .attr("y", options.y)
            .attr("fill", options.color)
            .attr("width", options.width)
            .attr("height", options.height)
            .attr("opacity", 0.5)
        ;

        var node = new DragNode(svgElement);

    };

    DragDropSurface.prototype.mouseOver = function (id) {
        console.log("over surface " + id);
    };

    DragDropSurface.prototype.mouseOut = function (id) {
        console.log("out surface" + id);
    };


    $(document).ready(function () {
        console.log("ready fn");
        var masterCanvas = new MasterCanvas("#mainContainer", { width: 620, height: 700 });
        masterCanvas.BeginInitialize();
        var surface1 = masterCanvas.addDragDropSurface("#copy1", { x: 10, y: 10, width: 600, height: 300, color:"#ddddff" });
        var surface2 = masterCanvas.addDragDropSurface("#copy2", { x: 10, y: 320, width: 600, height: 300, color: "#ffdddd" });
        masterCanvas.EndInitialize();
        surface1.addDraggableNode({ color: "#0000ff", x:10, y: 10, width: 100, height: 40 });
        surface2.addDraggableNode({ color: "#ff0000", x: 10, y: 10, width: 100, height: 40 });

    });

})();

index.html

<!DOCTYPE html>
<html>
<head>
  <title>d3 drag drop example</title>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
	<script type="text/javascript" src="d3dragdrop.js"></script>
    <style>


        #mainContainer {            
            padding: 50px;
            background-color: #CB7D7D;
            cursor: pointer;
 } 

        .master-canvas { 
            background-color: red; 
}


    </style>
</head>
<body>
    <div id="mainContainer">
        <div id="copy1"></div>
        <div id="copy2"></div>
    </div>
</body>
</html>