//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;
}