JSFiddle - React, Tailwind, and code Playground

by Ali Soltani

HTML

<div class="rowDashboard">Row</div>
<div class="buttonDashboard">Button</div>
<div id="content"></div>

CSS

#content {
  height: 400px;
  border: 1px solid;
}

.rowDraggable {
  text-align: center;
  height: 150px;
  border: Red 1px solid;
  position: relative;
  display: block;
}

.buttonDraggable {
    border: green 1px solid;
    position: relative;
    display: block;
}

.buttonDashboard {
  width: 70px;
  height: 25px;
  background: green;
  text-align: center;
}

.rowDashboard {
  width: 70px;
  height: 25px;
  background: red;
  text-align: center;
}

.column {
  border: 1px solid #dad55e;
  height: 40px;
}

JavaScript

var rowIndex = 0;
var buttonIndex = 0;

$(init);

function init() {
    $('.rowDashboard').draggable({
        containment: '#content',
        cursor: 'move',
        helper: addNewRow,       
        revert: "invalid",
    });

    $('#content').droppable({
            accept: ".rowDashboard",
            drop: function (ev, ui) {
                ui.helper.attr('style', '');
                $(ui.helper).addClass('rowDraggable');
                $item = $(ui.helper).clone();
                $item.appendTo('#content');
            },
        });       

    //------- buttonDraggable -----------
    $('.buttonDashboard').draggable({
        containment: '#content',
        cursor: 'move',
        helper: addNewButton,
    });      
}

function addNewButton() {
    buttonIndex++;
    return '<input type=\'button\' value=\'button ' + buttonIndex + ' \'>   </input>';
}

function addNewRow() {
     $row = $(document.createElement('div'));
     $row.attr("id","droppableDiv");
     $row.html("drop here");
     $row.droppable({
        accept: ".buttonDashboard",
       // greedy: true,
        drop: function (ev, ui) {
        alert('ok');                    
        },
    });
     return $row;
}