Question

我想在textarea内添加一个值，允许用户将div或image拖入其中。

这大致是我的html的样子。

img {
  width: 100px;
}

.emote {
  position:relative;
  background-color:rgba(45,45,45, 0.3);
  margin: 20px 0px;
}

.emote .emoteTitle {
  position:absolute;
  top:50%;
  margin-left: 50px;
}

<div 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" alt="emote1" title="emote1" class="emoteImage">
<span class="emoteTitle">emote1</span>
</div>

<div 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" alt="emote2" title="emote2" class="emoteImage">
<span class="emoteTitle">emote2</span>
</div>

<textarea></textarea>

Fiddle link

因此，当用户将div.emote或图像拖到文本区域时，我希望它将emote1或emote2放入其中。

这项工作的最佳方式是什么？

Answer 1

我修改了最后一个示例：https://www.w3schools.com/html/html5_draganddrop.asp

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

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

#div1, #div2 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" data-value="img1" id="drag1" width="88" height="31">
</div>

<textarea id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></textarea>

Answer 2

这是一个基于你的片段。
将图像放在textarea上时，其alt文本将添加到光标位置。

您可以轻松更改此值以放置您想要的任何值，只需替换.setData('text', emoteImage.alt)上的第二个参数

供参考：
https://developer.mozilla.org/en-US/docs/Web/Events/dragstart
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

document.querySelectorAll('.emoteImage').forEach((emoteImage) => {
  emoteImage.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text', emoteImage.alt);
    event.effectAllowed = "copy";
  });
});

img {
  width: 100px;
}

.emote {
  position:relative;
  background-color:rgba(45,45,45, 0.3);
  margin: 20px 0px;
}

.emote .emoteTitle {
  position:absolute;
  top:50%;
  margin-left: 50px;
}

<div 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" alt="emote1" title="emote1" class="emoteImage">
<span class="emoteTitle">emote1</span>
</div>

<div 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" alt="emote2" title="emote2" class="emoteImage">
<span class="emoteTitle">emote2</span>
</div>

<textarea></textarea>

Answer 3

根据NoOorZ24的答案，这里是最终草案。

JsFiddle链接：JsFiddle

HTML

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

将div或图像拖到textarea中并在其中放置一个值

3 个答案: