JSFiddle - React, Tailwind, and code Playground

by oshirowanen

HTML

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<div id="divMain">loading</div>

CSS

.column { width: 200px; float: left; padding-bottom: 100px; }
.widget_header { background:#aaaaaa; padding: 10px; }
.widget_sub_header { background:#bbbbbb; padding: 10px; }
.widget_content { background:#cccccc; padding: 10px; }
.widget_footer { background:#dddddd; padding: 10px; }
.ui-sortable-placeholder { background:#dddddd; visibility: visible !important; }
.ui-sortable-placeholder * { visibility: hidden; }

JavaScript

$("#divMain").empty();
    
$("<div class='column column_1'>").appendTo( $("#divMain") );
$("<div class='column column_2'>").appendTo( $("#divMain") );
$("<div class='column column_3'>").appendTo( $("#divMain") );

$( ".column" ).sortable({
    connectWith: ".column",
    tolerance: 'pointer'
});

var j = 1;
var i = 0;

for ( j = 1; j <= 3; j++ ) {

    for ( i = 0; i <= 2; i++ ) {
    
        var $widget = $("<div class='widget widget_" + i + "'>").appendTo( $(".column_" + j );
    
        $("<div class='widget_header widget_header_" + i + "'>").appendTo( $widget );
        
        $("<div class='widget_sub_header widget_sub_header_" + i + "'>").appendTo( $widget );
        
        $("<div class='widget_content widget_content_" + i + "'>").appendTo( $widget );
        
        $("<div class='widget_footer widget_footer_" + i + "'>").appendTo( $widget );
        
    }

}