JS: ошибка возврата и возврата

Question

У меня есть следующий код, но он не может заставить его работать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add jquery --> 

<div class="dropzone" style="width: 180px; height: 180px; padding: 10px; margin: 0px; border: 1px solid black;"></div><br> 
<div class="dropzone" style="width: 180px; height: 180px; padding: 10px; margin: 0px; border: 1px solid black;"> 
    <img class="dragable" src="https://image.spreadshirtmedia.net/image-server/v1/compositions/22839312/views/1,width=300,height=300,version=1478003241/smiley-smile-men-s-t-shirt.jpg" width="180"> 
</div> 
<script> 
    $(".dropzone").on("dragover", function(ev) { 
     ev.preventDefault(); 
    }); 

    $(".dropzone").on("drop", function(ev) { 
     ev.preventDefault(); 
     var data = ev.dataTransfer.getData("text"); 
     ev.target.appendChild(document.getElementById(data)); 
    }); 

    $(".dragable").on("dragstart", function(ev) { 
     ev.dataTransfer.setData("text", ev.target.id); 
    }); 
</script> 

https://jsfiddle.net/yv6uuzxn/

Это простой функции перетаскивания. Он работает, когда у меня есть ondragstart, и ondragover внутри тега div и img, но когда я переместил его в скрипт, я начал получать ошибки. drag and drop.php:14 Uncaught TypeError: Cannot read property 'getData' of undefined и drag and drop.php:19 Uncaught TypeError: Cannot read property 'setData' of undefined. Возможно, что-то простое, что я уже смотрю, но я не могу найти его.

Answer 1

Я добавил имущество draggable="true" и ID id="myImg" к вашему смайлику.
Затем, если вы установите и получите свойство события dataTransfer в originalEvent, оно отлично работает.
;)

$(".dropzone").on("dragover", function(ev) { 
 
    ev.preventDefault(); 
 
}); 
 

 
$(".dropzone").on("drop", function(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.originalEvent.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
}); 
 

 
$(".dragable").on("dragstart", function(ev) { 
 
    ev.originalEvent.dataTransfer.setData("text", ev.target.id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropzone" style="width: 180px; height: 180px; padding: 10px; margin: 0px; border: 1px solid black;"></div> 
 
<br> 
 
<div class="dropzone" style="width: 180px; height: 180px; padding: 10px; margin: 0px; border: 1px solid black;"> 
 
    <img class="dragable" draggable="true" id="myImg" src="https://image.spreadshirtmedia.net/image-server/v1/compositions/22839312/views/1,width=300,height=300,version=1478003241/smiley-smile-men-s-t-shirt.jpg" width="180"> 
 
</div>