title: HTML5 draggable elements within contenteditable div - stops working after first drop - why?
body: <p>I am trying to create a few draggable elements (tokens) that can be dragged around inside a contenteditable div. It seems that everything is working except that... after I drag one element and drop it, I cannot drag it again. It seems that I cannot bind to it's dragstart event again.</p>
  
  <p>Any idea why this happens and how can i fix it?</p>
  
  <p>Here's a link to my fiddle: <a href="http://jsfiddle.net/gXScu/1/">http://jsfiddle.net/gXScu/1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="editor" contenteditable="true"&gt;
      Testime siinkohal seda, et kuidas&lt;br /&gt;
      on võimalik asja testida.
      &lt;span class="draggable" draggable="true" contenteditable="false"&gt;Token&lt;/span&gt;
  &lt;/div&gt;
  &lt;span class="draggable" draggable="true" contenteditable="false"&gt;Token 2&lt;/span&gt;
  </code></pre>
  
  <p>Javascript (jQuery)</p>
  
  <pre><code>var bindDraggables = function() {
      console.log('binding draggables', $('.draggable').length);
      $('.draggable').off('dragstart').on('dragstart', function(e) {
          if (!e.target.id)
              e.target.id = (new Date()).getTime();
          e.originalEvent.dataTransfer.setData('text/html', e.target.outerHTML);
          console.log('started dragging');
          $(e.target).addClass('dragged');
      }).on('click', function() {
          console.log('there was a click');
      });
  }
  
  $('#editor').on('dragover', function (e) {
      e.preventDefault();
      return false;
  });
  
  $('#editor').on('drop', function(e) {
      e.preventDefault();
      var e = e.originalEvent;
      var content = e.dataTransfer.getData('text/html');
      var range = null;
    if (document.caretRangeFromPoint) { // Chrome
      range = document.caretRangeFromPoint(e.clientX, e.clientY);
    }
    else if (e.rangeParent) { // Firefox
      range = document.createRange();
          range.setStart(e.rangeParent, e.rangeOffset);
    }
      console.log('range', range)
    var sel = window.getSelection();
    sel.removeAllRanges(); sel.addRange(range);
  
    $('#editor').get(0).focus(); // essential
    document.execCommand('insertHTML',false, content);
      //$('#editor').append(content);
    sel.removeAllRanges();
      bindDraggables();
      console.log($('[dragged="dragged"]').length);
      $('.dragged').remove();
  });
  
  bindDraggables();
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#editor {
      border: 2px solid red;
      padding: 5px;
  }
  .draggable {
      display: inline-block;
      padding: 3px;
      background: yellow;
      cursor: move !important;
  }
  </code></pre>