billdwhite/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="description" content="Drag Demo"/>
    <meta charset="utf-8">
    <title>Drag Demo</title>

    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>

<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 100" version="1.1" baseProfile="full">
    <g transform="scale(1.2,0.8)">
        <rect transform="translate(50,20) rotate(30)" class="drag resize" x="50" y="30" width="50" height="30" fill="#69c"/>
        <rect class="drag resize" x="5" y="5" width="90" height="50" fill="#c66"/>
    </g>
</svg>
</body>
</html>

## jsbin.UhEgODO.css
	html, body {
		background:#eee; margin:0;
		user-select:none; -moz-user-select:none; -webkit-user-select:none;
	}
	p { margin:0.5em; text-align:center }
	svg {
		position:absolute; top:5%; left:5%; width:90%; height:90%;
		background:#fff; border:1px solid #ccc
	}
	svg rect { stroke:#333 }
	svg .drag { cursor:move }
	svg .sizer { opacity:0.3; fill:#ff0; stroke:#630;}
	#footer {
		position:absolute; bottom:0.5em; margin-bottom:0;
		width:40em; margin-left:-20em; left:50%; color:#666;
		font-style:italic; font-size:85%
	}
	#dragcatch { position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1 }

## jsbin.UhEgODO.js
  var svg   = document.getElementsByTagName('svg')[0];
  var svgNS = svg.getAttribute('xmlns');
  var pt    = svg.createSVGPoint();

  function createOn(root,name,prop){
    var el = document.createElementNS(svgNS,name);
    for (var a in prop) if (prop.hasOwnProperty(a)) el.setAttribute(a,prop[a]);
    return root.appendChild(el);
  }

	function rectCorner(rect){
		pt.x = rect.x.animVal.value + rect.width.animVal.value;
		pt.y = rect.y.animVal.value + rect.height.animVal.value;
		return pt.matrixTransform(rect.getTransformToElement(svg));
	}

	function pointIn(el,x,y){
		pt.x = x; pt.y = y;
		return pt.matrixTransform(el.getTransformToElement(svg).inverse());
	}

	function cursorPoint(evt){
		pt.x = evt.clientX; pt.y = evt.clientY;
		return pt.matrixTransform(svg.getScreenCTM().inverse());
	}

	// Make all rects resizable before drag, so the drag handles become drag
	for (var a=svg.querySelectorAll('rect.resize'),i=0,len=a.length;i<len;++i){
		(function(rect){
			var dot = createOn(svg,'circle',{'class':'drag sizer',cx:0,cy:0,r:5});
			var moveDotToRect = function(){
				var corner = rectCorner(rect);
				dot.setAttribute('cx',corner.x);
				dot.setAttribute('cy',corner.y);
			}
			moveDotToRect();
			rect.addEventListener('dragged',moveDotToRect,false);
			dot.addEventListener('dragged',function(){
				var rectXY = pointIn(rect,dot.cx.animVal.value,dot.cy.animVal.value);
				var w = Math.max( rectXY.x-rect.x.animVal.value, 1 );
				var h = Math.max( rectXY.y-rect.y.animVal.value, 1 );
				rect.setAttribute('width', w);
				rect.setAttribute('height',h);
			},false);
		})(a[i]);
	}

	for (var a=svg.querySelectorAll('.drag'),i=0,len=a.length;i<len;++i){
		(function(el){
			var onmove; // make inner closure available for unregistration
			el.addEventListener('mousedown',function(e){
				el.parentNode.appendChild(el); // move to top
				var x = el.tagName=='circle' ? 'cx' : 'x';
				var y = el.tagName=='circle' ? 'cy' : 'y';
				var mouseStart   = cursorPoint(e);
				var elementStart = { x:el[x].animVal.value, y:el[y].animVal.value };
				onmove = function(e){
					var current = cursorPoint(e);
					pt.x = current.x - mouseStart.x;
					pt.y = current.y - mouseStart.y;
					var m = el.getTransformToElement(svg).inverse();
					m.e = m.f = 0;
					pt = pt.matrixTransform(m);
					el.setAttribute(x,elementStart.x+pt.x);
					el.setAttribute(y,elementStart.y+pt.y);
					var dragEvent = document.createEvent("Event");
					dragEvent.initEvent("dragged", true, true);
					el.dispatchEvent(dragEvent);
				};
				document.body.addEventListener('mousemove',onmove,false);
			},false);
			document.body.addEventListener('mouseup',function(){
				document.body.removeEventListener('mousemove',onmove,false);
			},false);
		})(a[i]);
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta name="description" content="Drag Demo"/>
	<meta charset="utf-8">
	<title>Drag Demo</title>

	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	</head>

	<body>
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 100" version="1.1" baseProfile="full">
	<g transform="scale(1.2,0.8)">
	<rect transform="translate(50,20) rotate(30)" class="drag resize" x="50" y="30" width="50" height="30" fill="#69c"/>
	<rect class="drag resize" x="5" y="5" width="90" height="50" fill="#c66"/>
	</g>
	</svg>
	</body>
	</html>
	html, body {
	background:#eee; margin:0;
	user-select:none; -moz-user-select:none; -webkit-user-select:none;
	}
	p { margin:0.5em; text-align:center }
	svg {
	position:absolute; top:5%; left:5%; width:90%; height:90%;
	background:#fff; border:1px solid #ccc
	}
	svg rect { stroke:#333 }
	svg .drag { cursor:move }
	svg .sizer { opacity:0.3; fill:#ff0; stroke:#630;}
	#footer {
	position:absolute; bottom:0.5em; margin-bottom:0;
	width:40em; margin-left:-20em; left:50%; color:#666;
	font-style:italic; font-size:85%
	}
	#dragcatch { position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1 }
	var svg = document.getElementsByTagName('svg')[0];
	var svgNS = svg.getAttribute('xmlns');
	var pt = svg.createSVGPoint();

	function createOn(root,name,prop){
	var el = document.createElementNS(svgNS,name);
	for (var a in prop) if (prop.hasOwnProperty(a)) el.setAttribute(a,prop[a]);
	return root.appendChild(el);
	}

	function rectCorner(rect){
	pt.x = rect.x.animVal.value + rect.width.animVal.value;
	pt.y = rect.y.animVal.value + rect.height.animVal.value;
	return pt.matrixTransform(rect.getTransformToElement(svg));
	}

	function pointIn(el,x,y){
	pt.x = x; pt.y = y;
	return pt.matrixTransform(el.getTransformToElement(svg).inverse());
	}

	function cursorPoint(evt){
	pt.x = evt.clientX; pt.y = evt.clientY;
	return pt.matrixTransform(svg.getScreenCTM().inverse());
	}

	// Make all rects resizable before drag, so the drag handles become drag
	for (var a=svg.querySelectorAll('rect.resize'),i=0,len=a.length;i<len;++i){
	(function(rect){
	var dot = createOn(svg,'circle',{'class':'drag sizer',cx:0,cy:0,r:5});
	var moveDotToRect = function(){
	var corner = rectCorner(rect);
	dot.setAttribute('cx',corner.x);
	dot.setAttribute('cy',corner.y);
	}
	moveDotToRect();
	rect.addEventListener('dragged',moveDotToRect,false);
	dot.addEventListener('dragged',function(){
	var rectXY = pointIn(rect,dot.cx.animVal.value,dot.cy.animVal.value);
	var w = Math.max( rectXY.x-rect.x.animVal.value, 1 );
	var h = Math.max( rectXY.y-rect.y.animVal.value, 1 );
	rect.setAttribute('width', w);
	rect.setAttribute('height',h);
	},false);
	})(a[i]);
	}

	for (var a=svg.querySelectorAll('.drag'),i=0,len=a.length;i<len;++i){
	(function(el){
	var onmove; // make inner closure available for unregistration
	el.addEventListener('mousedown',function(e){
	el.parentNode.appendChild(el); // move to top
	var x = el.tagName=='circle' ? 'cx' : 'x';
	var y = el.tagName=='circle' ? 'cy' : 'y';
	var mouseStart = cursorPoint(e);
	var elementStart = { x:el[x].animVal.value, y:el[y].animVal.value };
	onmove = function(e){
	var current = cursorPoint(e);
	pt.x = current.x - mouseStart.x;
	pt.y = current.y - mouseStart.y;
	var m = el.getTransformToElement(svg).inverse();
	m.e = m.f = 0;
	pt = pt.matrixTransform(m);
	el.setAttribute(x,elementStart.x+pt.x);
	el.setAttribute(y,elementStart.y+pt.y);
	var dragEvent = document.createEvent("Event");
	dragEvent.initEvent("dragged", true, true);
	el.dispatchEvent(dragEvent);
	};
	document.body.addEventListener('mousemove',onmove,false);
	},false);
	document.body.addEventListener('mouseup',function(){
	document.body.removeEventListener('mousemove',onmove,false);
	},false);
	})(a[i]);
	}