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>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" type="text/css" />
<div id="dragContainer">
    <div id="elementsCntr">
        <div>select</div>
        <div>select_max</div>
        <div>select_avg</div>
    </div>
    <div id="elementsDrop">
        <div class="placeholder">Add your items here</div>
    </div>
</div>

CSS

#dragContainer{
    width:650px;
    position: relative;
    height: auto;
}
#elementsCntr{ 
    float:left; 
    width: 300px;  
    background-color: #CCC;
}
#elementsCntr div{ 
    background-color: #CCC;
    border: 1px #000 solid;
    height: 20px;
    padding: 10px;
    width:85%;
    margin:10px;
}
#elementsDrop{
    width: 300px;
    min-height: 50px;
    background-color: #FF0000;
    float: right
}

/* style the list to maximize the droppable hitarea */
#elementsDrop{ margin: 0;
    padding: 10px 10px 10px 10px; 
    float: right 
}
.elementCntr{
    border: 1px #000 solid;
    height: 50px;
    padding: 10px;
    width:80%;
    margin:10px;
}   
.ui-state-highlight { 
    background-color:#CCC;
    border: 1px #000 solid;
    height: 50px;
    padding: 10px;
    width:85%;
    margin:10px;
}
.handle{
    cursor: move;              
}

JavaScript

$( "#elementsCntr div" ).draggable({
    appendTo: "body",
    revert: "invalid",
    helper: "clone",
    cursorAt: { top: 5, left: 5 }
});
$( "#elementsDrop" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        
    var html = "<table width='100%'>";
        html += "<tr>";
        html += "<td>"+ui.draggable.text()+"</td><td>&nbsp;</td><td><a href='javascript:void(0)' class='delEl'>Del</a></td>";
        html += "</tr>";
        html += "<tr>";
        html += "<td><select name='' style='width:150px'><option>table.field</option></select></td><td>&nbsp;</td><td><a href='javascript:void(0)' class='handle'>Sort</a></td>";
        html += "</tr>";
        html += "</table>";
        
        $( "<div class='elementCntr'></div>" ).html( html ).appendTo( this );;
    }
}).sortable({
    items: "div:not(.placeholder)",
    sort: function() {
        $( this ).removeClass( "ui-state-default" );
    },
    cursor: "move",
    placeholder: "ui-state-highlight",
    revert: false,
    delay: 150,
    axis: "y",
    handle: ".handle"
}).disableSelection();

$(".delEl").live('click', function(){
    $( this ).closest("div.elementCntr").remove();
});