Draggable Clone + Sortable ( QUERY Elements )

by arrie1992

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>


<div id="dragContainer">
    <div id="elementsCntr" class="connectedSortable">
        <div>test 1</div>
        <div>test 2</div>
        <div>test 3</div>
    </div>
    <div id="elementsDrop" class="connectedSortable">
    </div>
</div>

CSS

#dragContainer{
    width:750px;
    position: relative;
    height: auto;
}
#elementsCntr{ 
    float:left; 
    width: 300px;  
    background-color: #CCC;
    min-height: 50px
}
#elementsCntr div{ 
    background-color: #CCC;
    border: 1px #000 solid;
    height: 20px;
    padding: 10px;
    width:85%;
    margin:10px;
    cursor: move;
}
#elementsDrop{
    width: 400px;
    min-height: 50px;
    background-color: #FF0000;
    float: right;
    padding: 10px 10px 10px 10px; 
}
#elementsDrop div{ 
    background-color: green;
    border: 1px #000 solid;
    height: 80px;
    padding: 10px;
    width:90%;
    margin:10px;
}
#elementsDrop div input{ 
    border: 1px #000 solid;
}
.elementCntr{
    border: 1px #000 solid;
    height: 50px;
    padding: 10px;
    width:80%;
    margin:10px;
}   
.ui-state-highlight { 
    background-color:#CCC !important;
    border: 1px #000 solid;
    height: 80px;
    padding: 10px;
    width:85%;
    margin:10px;
}
.handle{
    cursor: move;              
}

JavaScript

$( "#elementsCntr" ).sortable({
    connectWith: ".connectedSortable",
    receive: function(event, ui){
        var el = ui.item;
        var oText = el.find("td.originHtml").text();
        el.html(oText);        
    }
}).disableSelection();

$( "#elementsDrop" ).sortable({
    connectWith: ".connectedSortable",
    receive: function(event, ui){
        var el = ui.item; 
    var html = "<table width='100%'>";
        html += "<tr>";
        html += "<td class='originHtml'>"+el.text()+"</td><td>&nbsp;</td><td></td>";
        html += "</tr>";
        html += "<tr>";
        html += "<td>Alias</td><td><input type='text' name='input_alias[]' value='' /></td><td><a href='javascript:void(0)' class='handle'>Sort</a></td>";
        html += "</tr>";
        html += "<tr>";
        html += "<td>Functie</td><td><select name='input_function[]'><option value=''></option><option value='md5'>MD5</option><option value='sha1'>SHA1</option></select></td><td>Verplicht <input type='checkbox' name='input_required[]' /></td>";
        html += "</tr>";
        html += "</table>";   

        el.html( html );       
    },
    placeholder: ".ui-state-highlight",
    handle: ".handle"
});