I'd like to put a value inside textarea by allowing user to drag a div or image into it.

Here is roughly what my html looks like.

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="/?u=http%3A%2F%2Ficons.iconarchive%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="/?u=http%3A%2F%2Fes.seaicons%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>

I'd like to put a value inside textarea by allowing user to drag a div or image into it.

Here is roughly what my html looks like.

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./iu/?u=http%3A%2F%2Ficons.iconarchive.%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./iu/?u=http%3A%2F%2Fes.seaicons.%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

So when user drags a div.emote or the image onto text area i want it to put either emote1 or emote2 into it.

What would be the best way to make this work?

• javascript
• html

Share Improve this question Follow edited Apr 17, 2018 at 12:59 oban_internet asked Apr 17, 2018 at 12:46 oban_internetoban_internet 22911 gold badge33 silver badges1212 bronze badges 4

• From what I know is that you actually can't insert images into inputs. But you could give a try "Raw emojis" or try to have some emojis with unicodes that you are going to insert into your input. Example :

  发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745390241a4625628.html