Get the element ID when dragging and dropping

Navigation
2

I found this code on the internet and I am studying how it works, to try to adapt in a system, I already got the id of the parent element, the id of the LI that clicked is not coming right, and I need me show the element to which it was dragged.

In short, it should show me in alert id of the main box, id clicked, and id of the box I dropped.

link 

<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>
    
asked by anonymous 20.05.2015 / 21:05

2 answers

0

Replace event stop with receive , see all properties here .

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

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

And to capture the destination element use $(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 in JSFiddle .

    
20.05.2015 / 22:12
0

To get the id of the item that was dragged you will have to use the ui that is passed in 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();
});

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

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

You can see an example working here:

jsfiddle

    
20.05.2015 / 22:16
Return of the original scale in a prediction function [closed] Object request json always returning NULL in php