title: drag and drop between lines or paragraphs in contenteditable
body: <p>I am trying to drag and drop content in my contenteditable area. </p>
  
  <pre><code>&lt;div contenteditable="true"&gt;
  &lt;p&gt;some multiline paragraph
     paragraph&lt;/p&gt;
  &lt;p&gt;another multiline 
     paragraph&lt;/p&gt;
  &lt;div class="draggable"&gt;DRAGGABLE&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Html with the same structure as above with more content is at <a href="http://jsfiddle.net/BQg7L/1" rel="nofollow">http://jsfiddle.net/BQg7L/1</a></p>
  
  <p>What I want is that I should be able to drag and drop the '.draggable' element into the paragraph <code>&lt;p&gt;</code> tags. And here is the detail. The drop should work as either of the following ways.</p>
  
  <ol>
  <li>The draggable needs to be DROPPED only between lines of the paragraph and when dropped, it should split the paragraph into two paragraphs at the point of dropping. And the dropped element should be between these two paragraphs.</li>
  <li>Or, draggable should be dropped only at the end of the paragraph (i.e., after the closing <code>&lt;/p&gt;</code> tag) no matter where inside the paragraph it is dropped.</li>
  </ol>
  
  <p>Any help is appreciated. The jsfiddle has only the question and no javascript code as I dont have any idea to start with. I will update the jsfiddle with js as I get some directions.</p>