ドラッグ＆ドロップイベントが動作しません - 画像を別の画像にドラッグしますか？

Question

私は2つの画像を持っています.tape & .still

.tapeは、背景イメージのあるdivです。 .tapeイメージを.stillイメージにドラッグアンドドロップすると、下のJavascriptコード（//Drag & Drop Eventコメントmain.js）を実行しようとしています。

多くの修正を試みましたが、これを動作させることができません - どのような解決策も素晴らしいでしょう！

index.htmlを

<div id="tape" draggable="true"></div> 

<img src="./assets/img/still.png" class="still" ondrop="drop(event)"> 

<img src="./assets/img/vhstwo.gif" class="vhstwo" onload="fadeIn(this)" style="display:none;"> 

のstyle.css

#tape { 
    background-image: url('./img/trueromance.png'); 
    background-size: 150px; 
    background-repeat: no-repeat; 
    width: 150px; 
    height: 220px; 
    position: absolute; 
    margin: auto; 
    left: 0; 
    right: 580px; 
    top: 325.5px; 
    z-index: 3000; 
} 

main.js

$(document).ready(function() { 

    //Drag & Drop Event 
    function drag(ev) { 
    setTimeout(function() { $(".vhstwo").fadeIn(500); }, 8800); 
    $(".still").fadeIn(0); 
    } 

    //Custom Ghost Image 
    document.getElementById("tape").addEventListener("dragstart", function(e) { 
     e.dataTransfer.setDragImage(img, 0, 200); 
     }, false); 
     var img = document.createElement("img"); 
     img.src = "https://i.imgur.com/FLqpRMq.png"; 

}); 

Answer 1

私はあなたがアルがすべきだと思いますターゲットのdivのlowdrop：

function allowDrop(ev) { 
    ev.preventDefault(); 
}; 

function drop(ev) { 
    alert("dosomethingondrop"); 
} 

function drag(ev) { 
    setTimeout(function() { 
    $(".vhstwo").fadeIn(500); 
    }, 8800); 
    $(".still").fadeIn(0); 
} 

$(document).ready(function() { 
    $(".vhstwo").one("load", function(e) { 
    var el = $(this); 
    $(function() { 
     el.fadeIn(500); 
    }); 
    }).each(function() { 
    if (this.complete) $(this).load(); 
    }); 
    //Custom Ghost Image 
    document.getElementById("tape").addEventListener("dragstart", function(e) { 
    e.dataTransfer.setDragImage(img, 0, 200); 
    }, false); 
    var img = document.createElement("img"); 
    img.src = "https://i.imgur.com/FLqpRMq.png"; 

}); 

https://jsfiddle.net/Tintin37/j7r5cgo6/