拖放到文本框中

drag and drop into textbox

本文关键字：文本 拖放      更新时间：2023-09-26

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

在我点击按钮的那一刻，某个文本被添加到文本框（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"。

您可以使用 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中测试。

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

查看可拖动和可放置功能

相关文章：