JSFiddle - React, Tailwind, and code Playground

by mecano

HTML

<div id="menu">
            <div id="modules">
                <div id="mod01"><img src="1-image.svg" width="120" height="80"></div>
                <div id="mod02"><img src="1-image-1-text.svg" width="120" height="80"></div>
                <div id="mod03"><img src="1-text.svg" width="120" height="80"></div>
            
                <div id="dropdown" style="display:none;">
                    <div class="div_mod" data-type="mod01" data-id="1">
                        <img src="1-image.svg" width="240" height="70">
                    </div>
                   <div class="div_mod" data-type="mod02" data-id="2">
                       <div class="margin-elt float-elt"><img src="1-image.svg" width="50" height="50"></div>
                       <div class="size-paragraphe">Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem.</div>
                   </div>
                   <div class="div_mod" data-type="mod03" data-id="3">
                       <p class="size-paragraphe margin-elt">Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitems portunum est, ut arbitror.</p>
                   </div>
                </div>
            </div>    
        </div>
        <div id="container">
            <div id="bloc_1" style="display:none;">
                <div class="div_mod01 row drag-drop" data-id="1">
                    <img src="1-image.svg" width="240" height="70">
                </div>
               <div class="div_mod02 row drag-drop" data-id="2">
                   <div class="margin-elt float-elt"><img src="1-image.svg" width="50" height="50"></div>
                   <div class="size-paragraphe">Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem.</div>
               </div>
               <div class="div_mod03 row drag-drop" data-id="3">
                   <p class="size-paragraphe margin-elt">Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitems...

CSS

#menu {width:300px;}
            #mod01, #mod02, #mod03 {width:120px;margin:0 auto;}
            #container {width:300px;margin-left:20px;}
            #bloc_1, #bloc_2, #dropdown {padding:20px;}
            .div_mod01, .div_mod02, .div_mod03, #div_1, #div_2, #div_3, .div_mod {border:1px dashed #000; margin:10px auto;}
            .div_mod03 p {text-align:center;}
            .size-paragraphe {font-size:12px;}
            .margin-elt {margin-right:10px;}
            #container, #menu, .float-elt {float:left;}
            #container, #menu {border:1px dotted #000;margin-bottom:20px;}
            .add {text-align:center;cursor:pointer;background:#000;color:#fff;padding:5px;}
            .add:hover {background:green;color:#fff;}
            #btn_update {clear:both;margin:0 0 0 320px;}
            #update, #save {background:red;color:#fff;padding:10px;text-align:center;cursor:pointer;}

JavaScript

(function(){
                $("#modules").hover(
                    function() {
                        $("#dropdown").fadeIn(200);
                    }, function() {
                      $("#dropdown").fadeOut(200);
                    }
                );  
                $("#mod01" ).hover(function() {
                    $(".div_mod[data-type='mod01']" ).show();
                    $(".div_mod[data-type='mod02']" ).hide();
                    $(".div_mod[data-type='mod03']" ).hide();
                });   
                $("#mod02" ).hover(function() {
                    $(".div_mod[data-type='mod01']" ).hide();
                    $(".div_mod[data-type='mod02']" ).show();
                    $(".div_mod[data-type='mod03']" ).hide();
                });   
                $("#mod03" ).hover(function() {
                    $(".div_mod[data-type='mod01']" ).hide();
                    $(".div_mod[data-type='mod02']" ).hide();
                    $(".div_mod[data-type='mod03']" ).show();
                });   
                $(".div_mod" ).hover(
                    function() {
                        $(this).append('<div class="add"><i class="fa fa-plus"></i>Insert</div>');
                        $('.add').click(function() {
                            $("#div_1" ).prepend($("#bloc_1 .row[data-id='"+$(this).parent().attr("data-id" )+"']" ).clone());
                        });
                    }, function() {
                        $(this).children(".add" ).remove();
                    }
                );
                // draggable & save module
                $('#btn_update').on('click','#update',function(e){
                    e.preventDefault();
                    $(this).fadeOut('slow',function(){
                        $(this).siblings().fadeIn('slow').css("display", "inline-block");
                    });
                    // ajoute la propriété pour le drop et le transfert de données
                   ...