JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<div class="drag">&lt;li&gt;</div>
<div id="source" style="height: 200px; overflow: auto;">
<ul data-css="list">
</ul>
</div>
<button>get code</button><br>
<pre id="html" style="width: 400px; height: 200px;  overflow: auto;"></pre>

CSS

.drag {
    border: 5px solid rgba(0,0,0,0.1);
    padding: 0.2em;
    width: 2em;
    cursor: move;
    background: rgba(255,255,255,0.5);
    text-align: center;
}
.active {
   border: solid 1px orange;        
}
*[data-css=list],
*[data-css=list-item] {
    border: dashed 1px grey;  
    display: block;
    margin: 1em; 
    padding: 1em;    
}
.drop {
    border: 1px solid gray;
    margin: 5em auto;
    padding: 1em;
}

JavaScript

jQuery.fn.selectText = function(){
   var doc = document;
   var element = this[0];
   //console.log(this, element);
   if (doc.body.createTextRange) {
       var range = document.body.createTextRange();
       range.moveToElementText(element);
       range.select();
   } else if (window.getSelection) {
       var selection = window.getSelection();        
       var range = document.createRange();
       range.selectNodeContents(element);
       selection.removeAllRanges();
       selection.addRange(range);
   }
};


$(".drag").draggable();
var counter = 0;
var subcounter = 0;
var lastcounter = 0;
$('button').click(function() {
    var takeCode = $('ul[data-css="list"]')[0].outerHTML;
   $('#html').text(takeCode);
});
$('ul[data-css="list"]').droppable({
    accept: ".drag",
    drop: function( event, ui ) {
        $(ui.draggable)
        counter += 1;
       
        $(this).append('\t<li data-css="list-item">item-' + counter + '</li>\n');
        
        $('li[data-css="list-item"]').attr('contenteditable', 'true').focus().selectText();
        $('li[data-css="list-item"]').click(function() {
             $(this).focus().selectText();
        }) 
            $('li[data-css="list-item"]:focus').selectText();

            
        //$(this).addClass('active');    
    }
});