拖动元素时HTML动画“ghost-img”

Question

拖动元素时，有没有办法动画“鬼影”？

就像Google Drive一样，拖动文件会触发炫酷效果。我尝试将CS​​S动画添加到ghost-img，例如this，但它不起作用。

Answer 1

这样https://jsfiddle.net/mdvrkaer/4/： 你错过了＆＃34; 拖动＆＃34;事件。移动幽灵，让他跟着鼠标光标......

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




}