JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<input id="drag2" value="plain text"> </input>
</div>
<img id="image1" src="http://www.exiv2.org/include/img_1771.jpg"/>

<div>
<a href="http://google.com">link 1</a>
</div>




<div id="target"></div>

CSS

img
{
    width: 100px;
    -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  -o-user-select: all;
  user-select: all;
}



#target
{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #aaa;
    
}

JavaScript

var target = document.getElementById('target');


target.addEventListener('dragover', function(e){
    e.preventDefault();
});

target.addEventListener('drop', function(e){
    console.log('length:',e.dataTransfer.items.length, '\n', 'plain text:', e.dataTransfer.getData('text/plain'), '\n', 'link:', e.dataTransfer.getData('text/uri-list'), '\n', 'html content:', e.dataTransfer.getData('text/html'));
    e.preventDefault();
});