Edit in JSFiddle

var obj = document.getElementById('drag-1'),
    obj2 = document.getElementById('drag-2');
		
viiny.dragger(obj, {
  onStop: function (e, obj) {
		obj.innerHTML = "Distance X: " + parseInt(e.distanceX) + "px<br /><br />" +
		"Distance Y: " + parseInt(e.distanceY) + "px";
  }
});
	
viiny.dragger(obj2, {
	onStart: function (e, obj) {
		obj.style.backgroundColor = "red";
		obj.innerHTML = "Drag started.";
  },
  onDrag: function (e, obj) {
		obj.innerHTML = "ClientX: " + parseInt(e.clientX) + "px<br /><br />" +
		"ClientY: " + parseInt(e.clientY) + "px";
  },
  onStop: function (e, obj) {
		obj.style.backgroundColor = "#23527c";
		obj.innerHTML = "Drag stoped.";
  }
});

<div id="drag-1" class="draggable box">
    Drag me
</div>

<div id="drag-2" class="draggable box">
    Drag me
</div>

.draggable {
	position: absolute;
	left: 0;
	top: 0;
}

.box {
	width: 100px;
	height: 100px;
	padding: 10px;
	font-size: 12px;
	text-align: center;
	background-color: #23527c;
	color: #FFFFFF;
	word-wrap: break-word;
}

.active-drag {
  opacity: 0.7;
}

#drag-2 {
  left: 200px;
}