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;

目前的结果： how the current code looks

此刻（我在ubuntu中工作，如果它很重要），如果在Chrome中运行它，它让我拖动按钮（图片）并将它们放在文本中，但它放了＆＃34; src＆＃34 ;在文本框中而不是我想要的文本。另一方面，在firefox中，即使添加draggable =＆＃34; true＆＃34;也无法拖动按钮。

Answer 1

你可以用Drag＆amp;下拉式API。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在Chrome＆amp; Firefox浏览器。

Answer 2

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

查看Draggable和Droppable功能

拖放到文本框中

2 个答案: