Javascript 拖放到文本框中

我正在尝试创建一个文本框和一个可拖动的按钮

当我点击按钮时，一个特定的文本被添加到文本框中（JavaScript和HTML）

我想添加一个选项，将按钮拖动到文本框中，这将导致在我单击按钮时将相同的文本添加到文本框中

如果可能，我也想选择在哪里添加此文本。也就是说，如果我拖动按钮并在文本框的句子中间拖动，它会将文本添加到我丢弃文本的句子中间，而不是文本框的开头

提前谢谢你

编辑：

这是我已经完成的部分代码，很抱歉有点混乱（对于我正在做的事情，我需要将所有内容都放在字符串中）

var emoticon1=“”；
var emoticon2=“”；
var emoticon3=“”；
var emoticon4=“”；
var tmp=“var txt=document.getElementById（'commentTB'）。value；txt='#'+type+'''+txt；document.getElementById（'commentTB'）。value=txt；”；
var fun=“函数添加标签（类型）{”+tmp+“}”；
var emoticonlist=fun+emoticon1+emoticon2+emoticon3+emoticon4；

目前的结果是：

---

目前（如果有必要，我在ubuntu中工作），如果在chrome中运行它，它允许我拖动按钮（图片）并将它们放入文本中，但它将“src”放在文本框中，而不是我想要的文本。另一方面，在firefox中，按钮不能被拖动，即使add draggable=“true”。

您可以使用拖放API来完成

document.addEventListener（'dragstart'，函数（事件）{
event.dataTransfer.setData（'Text'，event.target.innerHTML）；
});
#按钮p{
外观：按钮；
-moz外观：按钮；
-webkit外观：按钮；
显示：内联块；
填充物：2px 5px；
}

这
是
a
简单
拖放测试

不确定到目前为止您做了什么，所以很难提供帮助，但听起来jQuery UI在这里可能很有用

查看和函数
到目前为止您做了什么？添加了我到目前为止在编辑中所做的。
var emoticon1 = "<input title='curious' onclick='add_tag("+'"curious"'+");' type='image' id='cur' src='/content/modules/dev/emoticons/curious.png' style='height:48px;width:48px;' />";
var emoticon2 = "<input title='confused' onclick='add_tag("+'"confused"'+");' type='image' id='con' src='/content/modules/dev/emoticons/confused.png' style='height:48px;width:48px;' />";
var emoticon3 = "<input title='helpful' onclick='add_tag("+'"helpful"'+");' type='image' id='help' src='/content/modules/dev/emoticons/helpful.png' style='height:48px;width:48px;' />";
var emoticon4 = "<input title='intersted' onclick='add_tag("+'"intersted"'+");' type='image' id='inte' src='/content/modules/dev/emoticons/interested.png' style='height:48px;width:48px;' />";
var tmp = "var txt=document.getElementById('commentTB').value;txt='#' + type + ' ' + txt ;document.getElementById('commentTB').value=txt;";

var fun = "<script> function add_tag(type) {"+tmp+"} </script>";
var emoticonsList = fun + emoticon1 + emoticon2 + emoticon3 + emoticon4;