Code HTML :

        <p><input class="js-controlled-input" value="mon texte" readonly="readonly"/>
<input class="js-target"/></p>

Code JS :

/* Pour déplacer un texte (pure JS).
 Source = https://jsfiddle.net/91o9mpaz/4/ */

const inputElement = document.querySelector(".js-controlled-input");

preventDragNDropChangesOn(inputElement);

function preventDragNDropChangesOn(inputElement) {
  let previousValue = inputElement.value;
  let isDragged = false;
  let wasDropped = false;

  /*
  * event order:
  *   dragstart (prepare for possible text cutting)
  *   drop (input text was not cut out yet at this point, so we can save it to revert it later)
  *   change (input text is already cut out at this point - revert it to the previous value)
  *   dragend (revert variables to initial state)
  */

  inputElement.addEventListener('dragstart', () => isDragged = true);
  document.body.addEventListener('drop', () =>
    (wasDropped = isDragged) && (previousValue = inputElement.value));
  inputElement.addEventListener('change', (e) =>
    isDragged && wasDropped && (e.target.value = previousValue));
  inputElement.addEventListener('dragend', () => isDragged = wasDropped = false);
}

Code HTML :

  <img id="drag1" draggable="true" ondragstart="drag(event)"
    src="../avatarHo.png" width="50" height="50" alt="" />

  <div id="drop1" ondragover="allowDrop(event)" ondrop="drop(event)" style=
    "width:50px;height:50px;border:1px solid"></div>

Tout élément HTML peut faire l'objet d'un glisser-lâcher.

La première chose à faire d'indiquer que l'élément est draggable : draggable="true". La seconde est de donner une fonction comme valeur de l'attribut ondragstart : ondragstart="drag(event)"

La troisième chose à faire d'indiquer que l'élément autorisé à recevoir : ondragover="allowDrop(event)". La quatrième est de donner une fonction comme valeur de l'attribut ondrop : ondrop="drop(event)"

Code JS :

  function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }

  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }