JSFiddle - React, Tailwind, and code Playground

by SebastianPataneMasuelli

HTML

<section id="availableDataPointsHolder">
    <h4>Primary</h4>
    <ul id="primaryAvailableDataPoints" class="availableDataPoints">
        
        <li class="personal">First Name</li>
        <li class="personal">Last Name</li>
        <li class="personal">Company Name</li>
        <li class="employment has_filter">Company Type</li>
        <li class="employment has_filter">Company Size</li>
        <li class="employment has_filter">Job Title</li>
        <li class="employment has_filter">Job Category</li>
        <li class="employment has_filter">Industry</li>
        <li class="personal has_filter">Country</li>                   
    </ul>
    <h4>Additional</h4>
    <ul id="additionalAvailableDataPoints" class="availableDataPoints">
        <li class="personal">Adress Line 1</li>
        <li class="personal">Adress Line 2</li>
        <li class="personal">City</li>
        <li class="personal">State</li>
        <li class="personal">Country</li>
        <li class="personal">Zip Code</li>
        <li class="personal">Phone</li>
    </ul>
    <h4>Custom</h4>
    <ul id="customAvailableDataPoints" class="availableDataPoints"> 
        <li class="custom">custom</li>               
    </ul>
</section>
<section id="selectedDataPointsHolder">
    <header>
        <div id="form_preview" class="header_label">form preview<div class="marker"></div></div>
        <div id="num_filters" class="header_label">filters<div class="marker"></div></div>
        <div id="field_required" class="header_label">required?<div class="marker"></div></div>
    </header>
    <ul id="personalSelectedDataPoints" class="selectedDataPoints">
        <li>
            <div class="inputHolder"><label>Email</label><br><input type="text" /></div>
            <a href="#" id="'Email_btn" class="remove ui-icon ui-icon-closethick" style="visibility: hidden"></a>
            <div class="requiredBtn">
                <input type="radio" id="radioEmail_yes" name="Emailrequired" checked="checked"...

CSS

ul {border: 1px solid red; width: 150px; }
#availableDataPointsHolder, #selectedDataPointsHolder {float: left;}
#selectedDataPointsHolder {border: 1px solid blue}

JavaScript

$('#personalSelectedDataPoints').sortable({
    axis: 'y',
    containment: '#personalSelectedDataPoints' /*, placeholder: 'helper-actives'*/
});
$('#employmentSelectedDataPoints').sortable({
    axis: 'y',
    containment: '#employmentSelectedDataPoints',
    forceHelperSize: true,
    forcePlaceholderSize: true
});
$('#customSelectedDataPoints').sortable({
    axis: 'y',
    containment: '#customSelectedDataPoints'
});

var personalDragOpts = {
    cursor: 'move',
    revert: true,
    revertDuration: 0,
    addClasses: false,
    helper: 'clone',
    opacity: '.7'
    //scope: 'personal',
    // connectToSortable: '#personalSelectedDataPoints'
};
$('.personal').draggable(personalDragOpts);

var employmentDragOpts = {

    cursor: 'move',
    revert: true,
    revertDuration: 0,
    addClasses: false,
    helper: 'clone',
    opacity: '.7'

    //scope: 'employment',
    //connectToSortable: '#employmentSelectedDataPoints'
};
$('.employment').draggable(employmentDragOpts);

$('.custom').draggable();




$('#selectedDataPointsHolder').droppable({
    drop: function(event, ui) {
        alert(ui.draggable.html());
        ui.draggable.html().appendTo('#personalSelectedDataPoints');
//        $('.personal').draggable('option', 'connectToSortable', '#personalSelectedDataPoints');
    }

});