拖放事件不起作用 - 将一个图像拖到另一个图像上？

Question

我有两个图像 .tape＆amp;.still。

.tape是具有背景图像的DIV。当我将.tape图像拖放到.still图像上时，我正在尝试运行下面的JavaScript代码（在 main.js 中的//Drag & Drop Event评论下）。

尝试了许多修复程序，我无法工作 - 任何解决方案都很棒！

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

我认为您应该在目标divs上允许drop：

 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/