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">
    <div class="column column_0"></div>
    <div class="column column_1"></div>
    <div class="column column_2"></div>
 </div>

CSS

.column { width: 300px; float: left; padding-bottom: 100px; }
            .widget {  }
            .widget_header { background:red; padding: 10px; position:relative; }
            /*.widget_header { background:red; 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; }
            
            .divButtons { position:absolute; top: 0px; right: 0px; background:darkred; padding: 10px; display:none; }
            .widget:hover  .divButtons {display:block; }

JavaScript

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

// Simple loop to simulate dynamically created widgets
var j = 0;
var i = 0;

for (j = 0; j <= 2; 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);
    }
}



// Create and assign buttons to all widget headers
$("<div>").appendTo($(".widget_header"));
$('.widget_header div').addClass('divButtons').text("(close), (min),  (max), (help)");