javascript - 将一个 div 或图像拖到 textarea 中并在其中放置一个值

Question

我想通过允许用户将 div 或 image 拖入其中来在 textarea 中放置一个值。

我的 html 大概是这样的。

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;
}

<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="emote1" class="emoteImage">
<span class="emoteTitle">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="emote2" title="emote2" class="emoteImage">
<span class="emoteTitle">emote2</span>
</div>

<textarea></textarea>

Fiddle link

因此，当用户将 div.emote 或图像拖到文本区域时，我希望它可以将 emote1 或 emote2 放入其中。

完成这项工作的最佳方法是什么？

Answer 1

这是一个基于您的片段。
当您将图像拖放到文本区域时，其替代文本将添加到光标位置。

您可以轻松地更改它以放置任何您想要的值，只需替换 .setData('text', emoteImage.alt) 上的第二个参数即可

供引用:
https://developer.mozilla.org/en-US/docs/Web/Events/dragstart
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

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

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;
}

<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="emote1" class="emoteImage">
<span class="emoteTitle">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="emote2" title="emote2" class="emoteImage">
<span class="emoteTitle">emote2</span>
</div>

<textarea></textarea>