拖放事件不起作用 - 將圖像拖到另一個圖像上？

Question

我有兩個圖像.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

我想你應該人lowdrop目標的div：

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/