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

我认为你应该允许目标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/

拖拽丢弃事件无效 - 将图像拖到另一个图像上？

1 个答案: