2

Achei este código na internet e estou estudando como ele funciona, para tentar adaptar em um sistema, já 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.

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>
2
  • Pode editar a pergunta colocando o código que você já tem e que está com erro? 20/05/2015 às 19:10
  • Editei Eduardo, na verdade não esta dando erro, não consigo pegar os id clicados 20/05/2015 às 19:13

2 Respostas 2

0

Substitua o evento stop por receive, veja todas as propriedades aqui.

O objeto ui retornado a partir do evento contém as seguintes propriedades:

  • item: atual elemento arrastado.
  • sender: elemento de origem.

E para capturar o elemento de destino utilize o $(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");
    }
});

Veja exemplo funcionando no JSFiddle.

4
  • Obrigado Lucio, exatamente o que estava precisando!! 20/05/2015 às 20:24
  • Valeu @MarcosPaulo. Por favor, aceita esta resposta para que outros usuários possam utilizar este post futuramente, obrigado! 20/05/2015 às 20:51
  • Lúcio Rubens, testando este codigo no celular, ele não funciona, sera que tem alguma forma de modificar ele para mobile? 20/05/2015 às 21:34
  • Pode deixar, era so pesquisar um pouco, colocando este JS resolve jquery.ui.touch-punch.min.js 20/05/2015 às 21:46
0

Para pegar o id do item que foi arrastado você vai ter que usar o ui que é passado no 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();
});

O stop me mostra todas as propriedades do item que está sendo arrastado, assim eu posso pegar as propriedades deste item da mesma forma que pego qualquer outro objeto jQuery. O código que faz isso é

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

Você pode ver um exemplo funcionando aqui:

jsfiddle

1
  • Valeu Erlon, obrigado, agora como consigo pegar o ID do ul que ele foi solto? Agora tenho o UL inicial, o LI arrastado, so falta o UL de destino 20/05/2015 às 20:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .