拖放到文本框中

Question

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

当我点击按钮时,某个文本被添加到文本框的乞讨(JavaScript和HTML).

我想添加一个选项,将按钮拖动到文本框中,当我点击按钮添加到文本框中时,将导致相同的文本.

如果可能的话,我也想选择添加此文本的位置.即如果我拖动按钮并在文本框中的句子中间拖动,它会将文本添加到句子的中间,我放下文本而不是文本框的开头.

谢谢你提前.

编辑:

这是我已经做过的代码的一部分,对不起有点凌乱(对于我正在做的事情,我需要将所有内容全部放入字符串中).

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;

目前的结果: 当前代码的外观

目前(我在ubuntu工作,如果它很重要),如果在chrome中运行它,它让我拖动按钮(图片)并将它们放在文本中,但它将"src"放在文本框而不是文本我想要.另一方面,在firefox中,即使添加draggable ="true",也无法拖动按钮.

Answer 1

你可以使用Drag&Drop-API来完成它.

document.addEventListener('dragstart', function (event) {
      event.dataTransfer.setData('Text', event.target.innerHTML);
    });

#buttons p {
  appearance:button;
  -moz-appearance:button; 
  -webkit-appearance:button;
  display: inline-block;
  padding: 2px 5px;
}

<div id="buttons">
  <p draggable="true" id="1">This</p>
  <p draggable="true" id="2">is</p>
  <p draggable="true" id="3">a</p>
  <p draggable="true" id="4">simple</p>
  <p draggable="true" id="5">Drag'n'Drop-Test</p>
</div>

<textarea></textarea>

在Chrome和Firefox中测试过.