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,ondrop、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"を追加しました。
originalEventにdataTransferイベントプロパティを設定して取得すると、正常に動作します。
;）

$(".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>