HTML 拖动元素时动画 "ghost-img"

Question

有什么方法可以在拖动元素时为 "ghost image" 设置动画？

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

Answer 1

走这条路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);




}

HTML 拖动元素时动画 "ghost-img"

HTML animate "ghost-img" when dragging element

html

css

animation

drag

web