Pegar o ID dos elementos ao arrastar e soltar

[Foxbh 0]

Boa tarde pessoal, achei este código na internet e estou estudando como ele funciona, para tentar adaptar em um sistema, ja consegui pegar o ID do elemento pai, o id do LI que cliquei não esta vindo certo, e preciso que me mostre o elemento para onde ele foi arrastado.

Resumindo, ele deve me mostrar no alert o Id da caixa principal, o ID clicado, e o ID da caixa que soltei.

Aqui o exemplo funcionando

http://fxcomp.com.br/teste.html

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

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

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

<script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script>



<!-- CSS -->

<style type="text/css">

.list {

    background-color: lightblue;

    border: 1px solid gray;

}


.items .ui-selected {

    background: red;

    color: white;

    font-weight: bold;

}


.items {

    list-style-type: none;

    margin-left: 10px;

    padding: 0;

    width: 100px;

    float: left;

}


.items li {

    margin: 2px;

    padding: 2px;

    cursor: pointer;

    border-radius: 3px;

}


.g {

    background-color: lightgreen;

}


.o {

    background-color: orange;

}


.highlight {

    border: 2px solid red;

    font-weight: bold;

}

</style>



<!-- Javascript -->

<script>

$(function () {

        $("#items1,#items2,#items3").sortable({

                connectWith: "#items1,#items2,#items3",

                start: function (event, ui) {


                        ui.item.toggleClass("highlight");

                },

                stop: function (event, ui) {


							var id_principal = $(this).attr('id');

							var id_do_li = $('li').attr('id');

							alert('Id Pricipal = '+id_principal+' | Id do li = '+id_do_li);



                        ui.item.toggleClass("highlight");


                }

        });




        $("#items1,#items2,#items3").disableSelection();

});

</script>


<!-- HTML -->

<ul id="items1" class="items">

    <li id="1" class="list">Item 1-1</li>

    <li id="2" class="list">Item 1-2</li>

    <li id="3" class="list">Item 1-3</li>

    <li id="4" class="list">Item 1-4</li>

    <li id="5" class="list">Item 1-5</li>

    <li id="6" class="list">Item 1-6</li>    

</ul>

<ul id="items2" class="items">

    <li id="7" class="list g">Item 2-1</li>

    <li id="8" class="list g">Item 2-2</li>

    <li id="9" class="list g">Item 2-3</li>

    <li id="10" class="list g">Item 2-4</li>

    <li id="11" class="list g">Item 2-5</li>

    <li id="12" class="list g">Item 2-6</li>    

</ul>

<ul id="items3" class="items">

    <li id="13" class="list o">Item 3-1</li>

    <li id="14" class="list o">Item 3-2</li>

    <li id="15" class="list o">Item 3-3</li>

    <li id="16" class="list o">Item 3-4</li>

    <li id="17" class="list o">Item 3-5</li>

    <li id="18" class="list o">Item 3-6</li>    

</ul>