Grab the element ID when dragging and dropping

Question

I found this code on the Internet and I’m studying how it works, to try to adapt in a system, I’ve already managed to get the id of the parent element, the id from the LI that I clicked is not coming right, and I need you to show me the element to which he was dragged.

In short, he must show me in alert the id of the main box, the id clicked, and the id from the box I dropped.

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

<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>

Answer 1

Replace the event stop for receive, see all properties here.

The object ui returned from the event contains the following properties:

• item: current drag element.
• sender: source element.

And to capture the target element use the $(this):

$(".items").sortable({
    connectWith: ".items",
    receive: function(event, ui) {
        var id_origem = ui.sender.attr("id"),
            id_clicado = ui.item.attr("id"),
            id_destino = $(this).attr("id");
    }
});

See example working on Jsfiddle.

Answer 2

To catch the id of the item that was dragged you will have to use the ui which is passed in the stop

$(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');
                            var teste = ui.item.attr("id");
                            alert('Id Pricipal = '+id_principal+' | Id do li = '+id_do_li+' | Id divi Final = '+teste);


                        ui.item.toggleClass("highlight");

                }
        });



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

The stop shows me all the properties of the item being dragged, so I can take the properties of this item the same way I take any other object jQuery. The code that does that is

var teste = ui.item.attr("id");

You can see an example working here:

jsfiddle