css - HTML animate "ghost-img" when dragging element -
it's there way animate "ghost image" when dragging element?
just google drive, drag files trigger cool effect. tried add css animation ghost-img, this it's not work.
go way https://jsfiddle.net/mdvrkaer/4/ : miss "drag" event. move ghost, make him follow mouse cursor...
$(document).ready(function(){ draganddrop(); $('#ghost-img').hide(); }); function draganddrop(){ var dragelement = document.getelementbyid('row-1'); dragelement.addeventlistener("dragstart",function(evt) { $('#ghost-img').show(); //ghost image var crt = document.getelementbyid('ghost-img').clonenode(true); crt.style.position = "absolute"; crt.style.top = "0px"; crt.style.right = "0px"; crt.style.zindex = -1; document.body.appendchild(crt); evt.datatransfer.setdragimage (crt, 0, 0); },false); dragelement.addeventlistener("drag",function(evt) { $('.ghost').css('top', evt.pagey); $('.ghost').css('left', evt.pagex); },false); dragelement.addeventlistener("dragend",function(evt) { $('.ghost').hide(); },false); }
Comments
Post a Comment