HTML animate "ghost-img" при перетаскивании элемента

Question

Есть ли способ анимации «призрачного изображения» при перетаскивании элемента?

Как и в случае с Google Диском, перетащить файлы вызовет эффект охлаждения. Я попытался добавить анимацию CSS к ghost-img, например this, но это не работает.

Answer 1

go this way https://jsfiddle.net/mdvrkaer/4/: Вы пропускаете «перетащить». чтобы переместить призрак, заставить его следовать указателю мыши ...

$(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); 




}