JSFiddle - React, Tailwind, and code Playground

by Santosh Giridhara

HTML

<div class="emote">
<img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ficons.iconarchive.com%2Ficons%2Fpaomedia%2Fsmall-n-flat%2F512%2Fcat-icon.png&f=1" alt="emote1" title="emote11" class="emoteImage">

<span title="asefasd" class="emoteImage" draggable="true" ondragstart="drag(event)">emote1</span>
</div>

<div class="emote">
<img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fes.seaicons.com%2Fwp-content%2Fuploads%2F2015%2F06%2Fsign-check-icon.png&f=1" alt="emot2e2" title="emote2" class="emoteImage">
<span alt="adfasda" class="emoteImage">emote2</span>
</div>

<textarea></textarea>

CSS

img {
  width: 100px;
}

.emote {
  position:relative;
  background-color:rgba(45,45,45, 0.3);
  margin: 20px 0px;
}

.emote .emoteTitle {
  position:absolute;
  top:50%;
  margin-left: 50px;
}

JavaScript

document.querySelectorAll('.emoteImage').forEach((emoteImage) => {
  emoteImage.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text', emoteImage.title);
    event.effectAllowed = "copy";
  });
});