JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Drag an element from the right (draggable) group to the left (sortable) group.</h3>

<ul id="activemodules">
    <li>
        <div class="modulebox" data-instance_id="rsslinkicon_f050c392" data-module_id="rsslinkicon">
            <div class="labeling">
                <div class="icon">
                    <img src="http://dl.dropbox.com/u/4202515/generic_moduleicon.png">
                </div><!-- end .icon -->
                <h2>RSS Link-Icon</h2>
                <p class="description">places an Icon that links to the pages RSS feed</p>
            </div><!-- end .labeling-->
        </div><!-- end .modulebox-->
    </li>
    <li>
        <div class="modulebox" data-instance_id="simpleimage_c1093a03" data-module_id="simpleimage">
            <div class="labeling">
                <div class="icon">
                    <img src="http://dl.dropbox.com/u/4202515/generic_moduleicon.png">
                </div><!-- end .icon -->
                <h2>Simple Image</h2>
                <p class="description">Displays an image that can optionally also be a link</p>
                
            </div><!-- end .labeling-->
        </div><!-- end .modulebox-->
    </li>
</ul><!-- END #activemodules -->

<ul id="allmodules">
    <li>
        <div class="modulebox" data-instance_id="rsslinkicon_c2a44639" data-module_id="rsslinkicon">
            <div class="labeling">
                <div class="icon">
                    <img src="http://dl.dropbox.com/u/4202515/generic_moduleicon.png">
                </div><!-- end .icon -->
                <h2>RSS Link-Icon</h2>
                <p class="description">places an Icon that links to the pages RSS feed</p>
            </div><!-- end .labeling-->
        </div><!-- end .modulebox-->
    </li>
    <li>
        <div class="modulebox" data-instance_id="simpleimage_c1093a03" data-module_id="simpleimage">
            <div class="labeling">
                <div class="icon">
                    <img...

CSS

section,header {
    display: block;
}


.clear {
    clear: both;
}

.fleft{
    float: left;
}

.fright{
    float: right;
}

.autocenter{
    margin-left: auto;
    margin-right: auto;
}



.noresize {
    resize: none;
    overflow: auto;
}

.hidden{
    display: none;
}



#module-placement-widget {
    width: 540px;
}


.wpk-settings-widget {
    background-color: #dfdfdf;
    margin-bottom: 20px;
    margin-top: 0;
}

.wpk-widget-content {
    min-height: 100px;
}

.wpk-settings-widget h1{
    font-size: 12px;
    margin-bottom: 5px;
}



.last{
    margin-bottom: 0;
}

/* @group Module Placer Widget */

.modulebox .labeling {
    padding-left: 40px;
}

.modulebox .labeling .icon img{
    width: 32px;
    height: 32px;
    float: left;
    margin-left: -40px;
}

.modulebox .instancesettings {
    margin-top: 10px;
    margin-bottom: 10px;
    display: none;
}

#activemodules,
#allmodules {
    background-color: #ede9ff;
    padding: 10px;
}

#activemodules li,
#allmodules li{
    background-color: silver;
    margin: 0 0 5px;
    padding: 5px;
}

#activemodules {
    width: 260px;
    float: left;
}

#allmodules {
    width: 210px;
    float: right;
}


.modulebox h2 {
    font: normal bold 12px Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-shadow:none;
}

.modulebox .description {
    margin: 0;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;
}

.modulebox .configlink {
    text-decoration: none;
    font-size: 10px;
    color: gray;
}

#allmodules .configlink {
    display: none;
}

JavaScript

var activelist = $("#activemodules").sortable({
    revert: false
    
});

$("#allmodules li").draggable({
    connectToSortable: "#activemodules",
    helper: "clone",
    revert: "invalid",
    
    start: function(event, ui) {

        // I'm expecting changes made to ui.helper to be 
        // reflected on the the newly created sortable element in 
        // #activemodules. But it seems not to be the case 
        ui.helper.find('h2').text('altered');
    }
});