/jsbin.akoCAkA.css

## jsbin.akoCAkA.css
#svg {
  width:400px;
  height:400px;
  background-color: #999;
}

## jsbin.akoCAkA.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
  <script src="http://snapsvg.io/assets/js/prism.js"></script>
</head>
<body>
  <svg id="svg"></svg>

</body>
</html>

## jsbin.akoCAkA.js
window.addEventListener('load', function() {
var s = Snap('#svg');
var bigCircle = s.circle(100, 100, 75);
var t = s.text(75,100,"drag me").attr({fill:'white'});

  // create group of circle and text so they drag together
var circleGroup = s.group(bigCircle, t);
  circleGroup.tx = 0; // current x translation
  circleGroup.ty = 0; // current y translation

var smallCircle = s.circle(40,40,30);

smallCircle.attr({fill:'purple'});

smallCircle.click(function() {
  // hide on click
  console.log('click');
   this.animate({opacity:0},1000);
});

var moveFunc = function (dx, dy, posx, posy) {

  var tstring = 't'+(this.tx+dx)+','+(this.ty+dy);

  // keep track of new translations to apply when mouse released
  this.newtx = this.tx+dx;
  this.newty = this.ty+dy;
  //console.log(tstring);
   circleGroup.transform(tstring);
};

circleGroup.drag( moveFunc,

                function(posx, posy, e){                  this.attr({fill:'red'});
                  console.log("Move started:" + posx + " " + posy);
                },

                 function(e){
console.log("Move stopped");    this.attr({fill:'black'});
this.tx = this.newtx;
this.ty = this.newty;                           }
        );
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
	<script src="http://snapsvg.io/assets/js/prism.js"></script>
	</head>
	<body>
	<svg id="svg"></svg>

	</body>
	</html>
	window.addEventListener('load', function() {
	var s = Snap('#svg');
	var bigCircle = s.circle(100, 100, 75);
	var t = s.text(75,100,"drag me").attr({fill:'white'});

	// create group of circle and text so they drag together
	var circleGroup = s.group(bigCircle, t);
	circleGroup.tx = 0; // current x translation
	circleGroup.ty = 0; // current y translation

	var smallCircle = s.circle(40,40,30);

	smallCircle.attr({fill:'purple'});

	smallCircle.click(function() {
	// hide on click
	console.log('click');
	this.animate({opacity:0},1000);
	});

	var moveFunc = function (dx, dy, posx, posy) {

	var tstring = 't'+(this.tx+dx)+','+(this.ty+dy);

	// keep track of new translations to apply when mouse released
	this.newtx = this.tx+dx;
	this.newty = this.ty+dy;
	//console.log(tstring);
	circleGroup.transform(tstring);
	};

	circleGroup.drag( moveFunc,

	function(posx, posy, e){ this.attr({fill:'red'});
	console.log("Move started:" + posx + " " + posy);
	},

	function(e){
	console.log("Move stopped"); this.attr({fill:'black'});
	this.tx = this.newtx;
	this.ty = this.newty; }
	);
	});