SO - 19803254

by mike guan

HTML

<div id="boxes_holder" class="initBox">
    <li><div draggable="true" class="boxes" style="text-align:center;"><p>1</p></div></li>
    <li><div draggable="true" class="boxes" style="text-align:center;"><p>2</p></div></li>
        <li><div draggable="true" class="boxes" style="text-align:center;"><p>3</p></div></li>
        <li><div draggable="true" class="boxes" style="text-align:center;"><p>4</p></div></li>
</div>
<div id="dragBox" class="initBox">
    <div id="dragBoxTitle" class="">Box</div>
</div>

CSS

#boxes_holder {
    width:100px;
    height:200px;
    border:0px;
    display: inline-block;
    float: left;
    vertical-align:top;
    background-color:#FBFBFB;
    list-style-type: none;
}
#dragBox {
    width:100px;
    height:200px;
    border:0px;
    display: inline-block;
    float: right;
    vertical-align:top;
    background-color:#FBFBFB;
    list-style-type: none;
}

JavaScript

$(document).ready(function () {
    $('#boxes_holder, #dragBox').sortable({
        connectWith: '.initBox',


        //Whenever Dropped Item
        receive: function (event, ui) {
            if ($(this).children().length > 4) {
                if ($(this).attr('id') == 'dragBox') {

                    $(ui.sender).sortable('cancel');
                }
            }

      
            //$( "#" + $(this).attr('id') + ' p:first').html()
            
            var liContents = [];
            
            var name = "#" + $(this).attr('id') + " >div p";
            alert(name); //#dragBox > div p
            
            
            
            $(this).each(function () {
                liContents.push(parseInt($(name).html()));
            });
            alert(liContents);
            
            
        }



    });
});