JSFiddle - React, Tailwind, and code Playground

by allcaps

HTML

<div class="row">
    <div id="draggable1" class= "draggable span3">
        <p>drag me</p>
    </div>
        <div id="draggable" class="draggable span3">
        <p>drag me</p>
    </div>
</div>
<hr>
<!-- Editeur : grille pour déposer -->
<div id="editor-container">
    <div class="row droppable">
        <div class="editable span3">
            <p>blabla</p>
        </div>
    </div>
</div>
<!-- editor-container -->

CSS

.span3 {
	    width:200px;
	}
    .droppable {
         height:400px;    
    }
	.droppable:hover {
//	    background: red;
	}
	.draggable:hover {
	    background: olive;
	}
	.editable:hover {
	    background: cyan;
	}
	.ui-state-active {
	    background: red;
	}
	.span3 {
	    border-style:solid;
	    border-width:1px;
	}

JavaScript

var new_id = 20;

$(".draggable").draggable({
    cursor: 'move',
    revert: 'invalid',
    helper: function () { 
        //alert($(this).attr('class'));

        var cloned = $(this).clone();
        cloned.attr('id', (++new_id).toString());
        
        return cloned;
    },
    distance: 20
});

$(".droppable").droppable({
    hoverClass: 'ui-state-active',
    tolerance: 'pointer',

    accept: function (event, ui) {
        return true;
    },
    drop: function (event, ui) {
        //alert($(this).parent().html());
        //alert($(ui.helper).attr('class'));
        var obj;
        if ($(ui.helper).hasClass('draggable')) {
            //alert('draggable');
          obj = $(ui.helper).clone();  
          obj.removeClass('draggable').addClass('editable').removeAttr('style');
          //obj.addClass('droppable');
          $(this).append(obj);

        }
        

        //alert($(this).parent().html());
    }
}).sortable({
    revert: false
});