JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://demo.webdeveloperplus.com/drag-drop-panels/js/jquery-1.3.2.js"></script>
<script src="http://demo.webdeveloperplus.com/drag-drop-panels/js/jquery.json-2.2.min.js"></script>
<script src="http://demo.webdeveloperplus.com/drag-drop-panels/js/jquery-ui-1.7.2.custom.min.js"></script>
<h3>Drag n Drop Panels</h3>
    <ul class="dragitems">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
    <div id="console" ></div>
    <div class="column" id="column1" >
                    <div class="dragbox" id="item1">
                        <h2>Widget 1</h2>
                            <div class="dragbox-content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum velit ultricies orci pharetra elementum. 
                            <ul class="draggedcontent" style="width:300px;height:100px;background-color:aqua"></ul>

                            </div>
                    </div>
                    <div class="dragbox" id="item2">
                        <h2>Widget 2</h2>
                            <div class="dragbox-content">
                                Lorem ipsum dolor sit amet, 
                            <ul class="draggedcontent" style="width:300px;height:100px;background-color:aqua"></ul>
                            </div>
                    </div>

                    <div class="dragbox" id="item3">
                        <h2>Widget 3</h2>
                            <div class="dragbox-content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum velit ultricies orci pharetra elementum. In massa mauris, 
                            <ul class="draggedcontent" style="width:300px;height:100px;background-color:aqua"></ul>
                            </div>
                    </div>
                    <div class="dragbox" id="item4">
                     ...

CSS

.column{
    width:100%;
    margin-right:.5%;
    min-height:300px;
    background:#fff;
    float:left;
}
.column .dragbox{
    margin:5px 2px  20px;
    background:#fff;
    position:relative;
    border:1px solid #ddd;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.column .dragbox h2{
    margin:0;
    font-size:12px;
    padding:5px;
    background:#eee;
    color:#000;
    border-bottom:1px solid #eee;
    font-family:Verdana;
    cursor:move;
}
.dragbox-content{
    background:#fff;
    min-height:100px; margin:5px;
    font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
    background: #f0f0f0;
    border:1px dashed #ddd;
}
.dragbox h2.collapse{
    background:#f0f0f0 url('http://demo.webdeveloperplus.com/drag-drop-panels/collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
    font-size:11px; font-weight:normal;
    margin-right:30px; float:right;
}
.success{
    background:#d9f9e0;
    border:1px solid #339933;
    padding:5px;
    font-weight:bold;
}

JavaScript

$(function(){
    $('.dragbox')
    .each(function(){
        $(this).hover(function(){
            $(this).find('h2').addClass('collapse');
        }, function(){
        $(this).find('h2').removeClass('collapse');
        })
        .find('h2').hover(function(){
            $(this).find('.configure').css('visibility', 'visible');
        }, function(){
            $(this).find('.configure').css('visibility', 'hidden');
        })
        .click(function(){
            $(this).siblings('.dragbox-content').toggle();
            //updateWidgetData();
        })
        .end()
        .find('.configure').css('visibility', 'hidden');
    });
    
    $('.column').sortable({
        connectWith: '.column',
        handle: 'h2',
        cursor: 'move',
        placeholder: 'placeholder',
        forcePlaceholderSize: true,
        opacity: 0.4,
        start: function(event, ui){
            //Firefox, Safari/Chrome fire click event after drag is complete, fix for that
            if($.browser.mozilla || $.browser.safari) 
                $(ui.item).find('.dragbox-content').toggle();
        },
        stop: function(event, ui){
            ui.item.css({'top':'0','left':'0'}); //Opera fix
            //if(!$.browser.mozilla && !$.browser.safari)
                //updateWidgetData();
        }
    })
    .disableSelection();
    
    $(".dragitems > li").draggable({
        helper:'clone',
        opacity: 0.4,
        connectToSortable:'.draggedcontent',
        start: function(e, ui) {
            draggedItem = ui.item;
        }
    });
    
    $(".draggedcontent").sortable({
        tolerance: 'pointer',
        cursor: 'move',
        opacity: 0.4,
        receive: function(event, ui) {
            //alert(draggedItem.html());        
        },
        
        update: function(event, ui) {
            
        }, 
        start: function(e, ui) {
            draggedItem = ui.item;
        }

    });

    
});

function updateWidgetData(){
    var items=[];
   ...