title: Draggable editable field
body: <p>I want to have an editable field that I can drag and drop. Here is my code (the red div is the drop zone) :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function drag(ev) {
    let targetId = ev.target.id;
    let rect = document.getElementById(targetId).getBoundingClientRect();
    ev.dataTransfer.setData("targetId", targetId);
    let offsetX = ev.clientX - rect.left;
    let offsetY = ev.clientY - rect.top;
    ev.dataTransfer.setData("offsetX", offsetX);
    ev.dataTransfer.setData("offsetY", offsetY);
  }
  
  function drop(ev) {
    let targetId = ev.dataTransfer.getData("targetId");
    let offsetX = parseInt(ev.dataTransfer.getData("offsetX"));
    let offsetY = parseInt(ev.dataTransfer.getData("offsetY"));
    let dropX = ev.clientX - offsetX;
    let dropY = ev.clientY - offsetY;
    let el = document.getElementById(targetId);
    el.style.left = dropX + "px";
    el.style.top = dropY + "px";
    ev.preventDefault();
  }
  
  function allowDrop(ev) {
    ev.preventDefault();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.item {
    min-width: 25px;
    position: absolute;
    border: solid;
    background: white;
  }
  
  #item1 {
    padding: 3px;
  }
  
  #drop-zone {
    width: 300px;
    height: 200px;
    background: red;
    border: solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  &lt;br&gt; 
  &lt;span class="item" contenteditable="true" draggable="true" ondragstart="drag(event)"&gt;Item1&lt;/span&gt; 
  &lt;br&gt;&lt;br&gt;
  &lt;div id="item1" class="item" draggable="true" ondragstart="drag(event)"&gt;
    &lt;span contenteditable="true"&gt;Item2&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I made 2 tests. My first test is <code>Item1</code>, where the <code>&lt;span&gt;</code> itself is draggable. Unfortunately, the browser cannot differenciate between "place the cursor" and "drag the element", so <code>Item1</code> is not draggable.</p>
  
  <p>Then my idea was to have a border around the field on which we would click to grab the element, so I made <code>Item2</code> where I put the <code>&lt;span&gt;</code> in a containing <code>&lt;div&gt;</code>. But now the problem is that, as the div is draggable, the span also is draggable, but I want to place the cursor freely in the span, and when I click on the span to write some text, the cursor is always at the beginning. How should I do ?</p>
  
  <p>Note : when I remove the <code>padding: 3px</code> line, <code>Item2</code> doesn't work.</p>
  
  <p>Thank you for your help.</p>