JSFiddle - React, Tailwind, and code Playground

by saravanan

HTML

<div class="column" id="column1">  
    <div class="dragbox" id="item1" >  
        <h2>Handle 1</h2>  
        <div class="dragbox-content" >  
           h1
        </div>  
    </div>  
    <div class="dragbox" id="item2" >  
        <h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>  
        <div class="dragbox-content" >  
           h2
        </div>  
    </div>  
    <div class="dragbox" id="item3" >  
        <h2>Handle 3</h2>  
        <div class="dragbox-content" >  
            <!-- Panel Content Here -->  
        </div>  
    </div>  
</div>  
<div class="column" id="column2" >  
    <div class="dragbox" id="item4" >  
        <h2>Handle 4</h2>  
        <div class="dragbox-content" >  
            h4 
        </div>  
    </div>  
    <div class="dragbox" id="item5" >  
        <h2>Handle 5</h2>  
        <div class="dragbox-content" >  
           h5
        </div>  
    </div>  
</div>

CSS

.column{
    width:49%;
    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:#f0f0f0;
    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('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
    font-size:11px; font-weight:normal;
    margin-right:30px; float:right;
}

JavaScript

$('.column').sortable({  
    connectWith: '.column',  
    handle: 'h2',  
    cursor: 'move',  
    placeholder: 'placeholder',  
    forcePlaceholderSize: true,  
    opacity: 0.4,  
})  
.disableSelection();