//JS 
function drag_start(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData(
    	"text/plain",
    	  (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' 
    	+ (parseInt(style.getPropertyValue("top"),10) - event.clientY)+','
    	+ event.target.id
    );

} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 


on('dragstart','[draggable]',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',function(event){
	var offset = event.dataTransfer.getData("text/plain").split(',');
    
    icon 				=document.getElementById(offset[2]);console.log(icon);
    //icon.style.position ="absolute";
    icon.style.left 	=(event.clientX + parseInt(offset[0],10)) + 'px';
    icon.style.top 		=(event.clientY + parseInt(offset[1],10)) + 'px';
    event.preventDefault();
    return false;
},false); 


/*CSS*/

[draggable]{
	width:65px;
	height:65px;
	
	z-index: 999;
	position:relative;
}