JSFiddle - React, Tailwind, and code Playground

by Sullan

HTML

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" />
<div class="demo">
<div style="float:left; background:#e7e5e5;    border-radius:5px; border:1px solid #565656;padding: 10px !important;">
                        <h2>Features</h2>
                        <ul id="report-items" class="drag_column draggable" style="border:none; background:none;">
                            <li id="item1" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 1</li>
                            <li id="item2" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 2</li>
                            <li id="item3" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 3</li>
                            <li id="item4" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 4</li>
                            <li id="item5" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 5</li>
                            <li id="item6" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 6</li>
                            <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 7</li>
                            <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 8</li>
                        </ul>
                        


</div>
<div style="margin-left:250px; background:#e7e5e5;    border-radius:5px; border:1px solid #565656; padding: 10px !important;">
<h2>Layout</h2>

<button>Click to add a Section</button>
<ul id="report-template" class="groupsList" >
      <li id="group1" class="group">Group 1  
      <ul id="groupItems1" class="itemsList"> 
          <li  class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 1</li>
        <li...

CSS

<style type="text/css">
body {
font-family: helvetica, arial, sans-serif;
font-size: 12px;
background-color: #EFEFEF;
}
* {
padding: 0;
margin: 0;
}
#content {
width: 1080px;
margin: 0 auto;
padding: 20px;
}
/**** Drag Drop Styling *****/

.drag_container {
width: 1000px;
margin: 0 auto;
position: relative;
/*border: 1px solid black;*/
position: relative;
z-index: 1;
/*overflow: hidden;*/
}
.report-features {
    float:left; background:#e7e5e5;
    border-radius:5px; border:1px solid #565656;
    padding: 10px !important;
}
.layout {
    float:left; width:370px; margin-left:20px;
    background:#e7e5e5;
    border-radius:5px; border:1px solid #565656;
    padding: 10px !important;
}
.group {
    display:block; 
}
.group ul {
border-radius:5px; border:1px solid #999; margin-bottom:10px !important; padding:10px;
background:#fff;
width: auto;
}
.draggable { list-style-type: none; margin: 0; padding: 0; }
.draggable li , .itemsList li { margin: 0 3px 3px 3px; padding: 0.1em; padding-left: 0; font-size: 12px; height: 14px; cursor: move; }
.groupsList li {
    margin: 0 3px 3px 3px; padding: 0.1em; padding-left: 0; font-size: 12px; cursor: move; list-style:none;
}
.draggable li span, .groupsList span {z-index: 5; float:left; width:20px; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
.itemsList {
    list-style:none;
}
.demo {
    padding:20px;
}
</style>

JavaScript

$(document).ready(function() {
$("ul, li").disableSelection();

$("#report-template").sortable({
    revert: true
});

$('#report-template').sortable();
$('ul.itemsList').sortable({
connectWith: $('.itemsList, .itemsList li')
});    

$("#report-items li").draggable({
    connectToSortable: "ul.groupsList, ul.itemsList",
    helper: "clone",
    revert: "invalid"
});

$("ul, li").disableSelection();
//$('#report-template').sortable();










$( "button" ).button().click(function() {
$( "<li class='group'>Name<ul class='itemsList ui-sortable'></ul></li>" ).appendTo(".groupsList");
$("ul, li").disableSelection();

$("#report-template").sortable({
    revert: true
});

$('#report-template').sortable();
$('ul.itemsList').sortable({
connectWith: $('.itemsList, .itemsList li')
});    

$("#report-items li").draggable({
    connectToSortable: "ul.groupsList, ul.itemsList",
    helper: "clone",
    revert: "invalid"
});

$("ul, li").disableSelection();

});

});