Javascript 将div或图像拖到textarea中，并在其中输入一个值

我想通过允许用户将

div

或

image

拖到

textarea

中，在

textarea

中添加一个值

下面是我的html的大致外观

img{
宽度：100px；
}
埃莫特先生{
位置：相对位置；
背景色：rgba（45,45,45,0.3）；
利润率：20px 0px；
}
.emote.emoteTitle{
位置：绝对位置；
最高：50%；
左边距：50像素；
}

表情1
表情2

我修改了最后一个示例：

这只是一个快速模板，但我希望您知道如何进一步修改它

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.innerHTML=document.getElementById（data.dataset.value）；
}

#div1，#div2{
浮动：左；
宽度：100px；
高度：35px；
利润率：10px；
填充：10px；
边框：1px纯黑；
}

拖放
在两个div元素之间来回拖动图像

这是一个建立在您的基础上的代码片段。
将图像放到文本区域时，其alt文本将添加到光标位置

您可以轻松地将其更改为输入任何想要的值，只需替换

.setData（'text'，emoteImage.alt）

供参考：

document.queryselectoral（'.emoteImage'）.forEach（（emoteImage）=>{
emoteImage.addEventListener（'dragstart'，（事件）=>{
event.dataTransfer.setData（'text'，emoteImage.alt）；
event.effectAllowed=“复制”；
});
});
img{
宽度：100px；
}
埃莫特先生{
位置：相对位置；
背景色：rgba（45,45,45,0.3）；
利润率：20px 0px；
}
.emote.emoteTitle{
位置：绝对位置；
最高：50%；
左边距：50像素；
}

表情1
表情2
根据NoOorZ24的回答，这里是最终草案


JSIDLE链接：

HTML

据我所知，实际上不能将图像插入到输入中。但是你可以尝试一下“原始表情”，或者试着在输入中插入一些带有Unicode的表情。示例：不要求放置图像，但要求放置其属性值（emote1或emote2）@supremedev您认为需要使用内容可编辑div
<div id="div1" 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" draggable="true" ondragstart="drag(event)" alt="emote1" title="emote2" class="emoteImage" data-value="img1" id="drag1"
    width="88" height="31">
  <span class="emoteTitle">emote1</span>
</div>

<div id="div2" 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" draggable="true" ondragstart="drag(event)" alt="emote2" title="emote2" class="emoteImage" data-value="img2" id="drag2"
    width="88" height="31">
  <span class="emoteTitle">emote2</span>
</div>

<textarea id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></textarea>

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.innerHTML = document.getElementById(data).dataset.value;
}