Déplacez une div ou une image dans la zone de texte et insérez une valeur à l'intérieur

Question

Je souhaiterais insérer une valeur à l'intérieur de textarea en permettant à l'utilisateur de faire glisser un div ou une image dedans.

Voici à quoi ressemble approximativement mon 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;
}

emote1

emote2

Lien Fiddle

Donc lorsque l'utilisateur fait glisser un div.emote ou l'image sur la zone de texte, je veux qu'il y mette soit emote1 soit emote2.

Quelle serait la meilleure façon de faire fonctionner cela ?

Answer 1

J'ai modifié le dernier exemple de: https://www.w3schools.com/html/html5_draganddrop.asp

Ceci n'est qu'un modèle rapide, mais j'espère que vous saurez comment le modifier davantage

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

Drag and Drop
Faites glisser l'image d'un côté à l'autre entre les deux éléments de div.

Answer 2

Voici un extrait qui s'appuie sur le vôtre.
Lorsque vous déposez l'image sur la zone de texte, son texte de remplacement sera ajouté à la position du curseur.

Vous pouvez facilement modifier ceci pour mettre n'importe quelle valeur que vous souhaitez, il suffit de remplacer le deuxième argument sur .setData('text', emoteImage.alt)

Pour référence:
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;
}

emote1

emote2

Answer 3

Basé sur la réponse de NoOorZ24 voici le projet final.

Lien JsFiddle : JsFiddle

HTML

  émoji1

  émoji2

Script

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