Here is the HTML code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="drop_area" contenteditable="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget luctus enim. Nunc varius bibendum accumsan. Donec pretium mi eget risus auctor, nec pulvinar libero blandit. Aenean feugiat dolor sit amet nisi sagittis mattis. Praesent lacus metus, aliquam vehicula enim eu, fringilla sollicitudin est.</p>
<p>Cras ut turpis at diam auctor euismod. Maecenas in mauris erat. Maecenas sit amet tellus a augue dignissim fringilla. Proin auctor et quam sed tincidunt. Vivamus vehicula est id ligula lacinia, ac euismod dolor porta. </p>
<p class="test_row" style="visibility: hidden"></p>
<p class="new_row" style="visibility: hidden"></p>
<!-- the below div should be draggable and can be dropped between lines in the above paragraphs. On drop, the paragraph should be split into two paragraphs and the div should be between these paragraphs -->
<div class="draggable">DRAGGABLE</div>
</div>
and the JS code:
$(document).ready(function(){
$.each($( ".drop_area p" ), function(){
var rows = parseInt($(this).height())/parseInt($(this).css('line-height'));
var arr_words = $(this).text().split(' ');
$('.new_row').html('');
$.each(arr_words, function(){
$('.test_row').text($('.test_row').text() + ' ' + this);
if(parseInt($('.test_row').height())>parseInt($(".drop_area p").css('line-height'))){
$('.new_row').html($('.new_row').html() + '<span style="height: 1px; width: 100%;display: block"></span> ' + this);
$('.test_row').text('')
}
else $('.new_row').html($('.new_row').html() + ' ' + this);
})
$(this).html($('.new_row').html())
})
$( ".draggable" ).draggable({
appendTo: 'body',
cursorAt: { top: 0, left: 30 },
revert: 'invariant',
helper: 'clone'
});
$( ".drop_area p span" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
over: function(event, ui) {
$(this).css('height','10px');
},
out: function(event, ui) {
$(this).css('height','1px');
},
drop: function( event, ui ) {
$(this).replaceWith('</p><p>')
}
})
})
You can also check the result here