Jump to content
cfandrade

Como recuperar os valores usando sortable! do (id) de uma li e a posição atual do (id) da nova (ul)

Recommended Posts

Estou tentando fazer a mudança dos (li) desse sistema que chamei de PRONTUARIOS, apenas arrastando de uma (ul) atual para outra que chamei de CAIXA, estou tentando recuperar o valor do id do prontuario (li) e a caixa atual que o usuário deixou o prontuario caso tenha mudado para uma nova caixa (ul). se alguem puder me ajudar, preciso recuperar o valor desses ids e atualizar no banco de dados!

 

 <script type="text/javascript">
         $(document).ready(function() {
             $("ul").sortable({
                delay: 150,
                connectWith: ".parent",
                cursor: 'move',
                stop: function() {
                    var caixaAtual = new Array();
                    var prontuario = '';
                    $('li .prontuario').each(function() {
                        //caixaAtual = $("data-id").html();
                        //prontuario = $("data-id").val(this);

                    });
                    console.log(prontuario);
                    //updateOrder(prontuario,caixaAtual);
                }
            });
             function updateOrder(id,caixa) {
                $.ajax({
                    url:"documentos/alterar_prontuario",
                    type:'post',
                    data:{id:id,caixa:caixa},
                    success:function(data){
                        toastr.success('Alterado com sucesso.');
                    }
                })
            }
        });
<div class="container mx-auto mt-3 mb-5 text-center">
                  <h4 class="col-12 text-center mx-auto">LISTAGEM SEGUNDO VOLUME</h4>
                                   CAIXA N° 01                  <ul id="c_01" class="col-12 parent mt-0 mb-2 ui-sortable">
                                                    <li id="239" data-id="239" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ADRIANO ALVES DE ALMEIDA</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">617.598-8</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1257101/2020</td>
                                        <td class="d-print-none col-1 align-middle mx-auto p-0 text-center"><a type="button" class="btn btn-outline-danger"
                                   </tr>
                                   </tbody></table>
                                </li>
                                                        <li id="247" data-id="247" class="col-12 mx-auto prontuario ui-sortable-handle" style="position: relative; left: 0px; top: 0px;">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">5</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ALEX JORGE MELO DA SILVA</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">664.041-1</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1251911/2020</td>

                                   </tr>
                                   </tbody></table>
                                </li><li id="241" data-id="241" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">2</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ALEF DA SILVA OLIVEIRA</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1.199.560-2</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center"></td>
                                   
                                   </tr>
                                   </tbody></table>
                                </li>
                                                        <li id="240" data-id="240" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">3</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ALEX ALVES CERQUEIRA</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">340.704-6</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1809667/2020</td>

                                   </tr>
                                   </tbody></table>
                                </li>
                                                        
                                                        
                                                        <li id="248" data-id="248" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">6</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ALEX XAVIER PIAUI</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">771.513-9</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1243357/2020</td>
                                   </tr>
                                   </tbody></table>
                                </li>
                                                        <li id="249" data-id="249" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">7</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ALEXANDRE DE OLIVEIRA MEDEIROS</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">893.604-9</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1415815/2020</td>

                                   </tr>
                                   </tbody></table>
                                </li><li id="246" data-id="246" class="col-12 mx-auto prontuario ui-sortable-handle" style="position: relative; left: 0px; top: 0px;">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">4</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ALEX EDUARDO DE JESUS LOURENCO</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">236.643-3</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1392042/2020</td>

                                   </tr>
                                   </tbody></table>
                                </li>
                                                        <li id="250" data-id="250" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">8</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ALEXANDRE PEREIRA DA COSTA</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">932.592-9</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1532754/2020</td>
                                        <td class="d-print-none col-1 align-middle mx-auto p-0 text-center"><a type="button" class="btn btn-outline-danger" href="http://10.14.101.160/cimic/?url=documentos/excluir_segundo_volume/250" title="APAGAR"><i class="fa fa-trash"></i></a></td>
                                   </tr>
                                   </tbody></table>
                                </li>
                                                </ul>
      
                                    CAIXA N° 02                  <ul id="c_02" class="col-12 parent mt-0 mb-2 ui-sortable">
                                                    <li id="242" data-id="242" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ALEXSANDRO HENRIQUE FRANCA CAMARGO DE MOURA</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1.224.350-7</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">2092453/2020</td>
                                   </tr>
                                   </tbody></table>
                                </li>
                                                        <li id="251" data-id="251" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">2</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">AMAURI FERREIRA DA SILVA</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">613.004-1</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">3</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1243426/2020</td>
                                   </tr>
                                   </tbody></table>
                                </li>
                                                        <li id="prontuario" data-id="243" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">3</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ANDERSON LIMA RIBEIRO GONCALVES</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1.164.179-2</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center"></td>
                                   </tr>
                                   </tbody></table>
                                </li>
                                                            <li id="252" data-id="252" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">4</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ANDERSON SOUZA VELOSO</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">277.426-3</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center"></td>
                                   </tr>
                                   </tbody></table>
                                </li>
                                                        <li id="244" data-id="244" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">5</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ANDRE ALMEIDA</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1.096.394-0</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">2</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center"></td>
                                   </tr>
                                   </tbody></table>
                                </li>
                                                        <li id="245" data-id="245" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">6</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ANDRE LUIZ RODRIGUES</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">465.133-7</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">2213488/2020</td>
                                   </tr>
                                   </tbody></table>
                                </li>
                                                </ul>
      
                                    CAIXA N° 03                  <ul id="c_03" class="col-12 parent mt-0 mb-2 ui-sortable">
                                                    <li id="253" data-id="253" class="col-12 mx-auto prontuario ui-sortable-handle">
                                   <table class="table table-hover table-sm mb-0 ">
                                       <tbody><tr class="row col-12 mx-auto text-center">
                                        <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
                                        <td class="col-5 align-middle mx-auto p-0 text-left">ANDREO LEONE FERREIRA LOBATO</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">719.305-5</td>
                                        <td class="col-1 align-middle mx-auto p-0 text-center">2</td>
                                        <td class="col-2 align-middle mx-auto p-0 text-center">1359268/2020</td>
                                   </tr>
                                   </tbody></table>
                                </li>
    <li id="254" data-id="254" class="col-12 mx-auto prontuario ui-sortable-handle">
      <table class="table table-hover table-sm mb-0 ">
        <tbody><tr class="row col-12 mx-auto text-center">
          <td class="col-1 align-middle mx-auto p-0 text-center">2</td>
          <td class="col-5 align-middle mx-auto p-0 text-left">AUGUSTO PEREIRA DA SILVA</td>
          <td class="col-2 align-middle mx-auto p-0 text-center">1.094.345-4</td>
          <td class="col-1 align-middle mx-auto p-0 text-center">1</td>
          <td class="col-2 align-middle mx-auto p-0 text-center">1183605/2020</td>
          </tr>
        </tbody></table>
    </li>
</ul>      
</div>

 

Share this post


Link to post
Share on other sites

Seu script sortable deveria ser parecido com isso:

 - o método 'stop' não é adequado no seu caso! o motivo e que ele é executado mesmo você realizando o drag/drop na mesma lista, entretanto o receive so será executado se um item for movido de uma lista para outra, que acredito ser o valido para uma atualização de Banco assim não precisa realizar uma validação manual.

 

se houver algum outra dúvida, talvez seja mais fácil utilizar a documentação do Jquery: https://api.jqueryui.com/sortable/#event-stop

mas qualquer coisa só mandar aqui sua dúvida.

 

mas um detalhe que pode ser um bug, esse é único "li" identificado com o id "prontuario" e não um valor númerico: 

<li id="prontuario" data-id="243" 

 

Solução:

$(document).ready(function() {
  $("ul").sortable({
    delay: 150,
    connectWith: ".parent",
    cursor: 'move',
    receive( event, ui ) {
      const [ item ] = ui.item;
      const caixaAtual = item.parentElement.id;
      const prontuario = item.id;
      
      console.log(prontuario, caixaAtual);
      updateOrder(prontuario, caixaAtual);
    }
  });
  
  function updateOrder(id,caixa) {
    $.ajax({
      url:"documentos/alterar_prontuario",
      type:'post',
      data:{id:id,caixa:caixa},
      success:function(data){
        toastr.success('Alterado com sucesso.');
      }
    })
  }
});

Jsbin test: https://jsbin.com/moyotaxila/edit?html,js,output 

Share this post


Link to post
Share on other sites
15 horas atrás, wanderval disse:

 

Solução:

obrigado  @wanderval, era  o que eu precisava, tb corrigi o bug aonde você identificou, esta funcionando corretamente

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Rasp
      Fala galera! Estou com a seguinte situação e queria uma ajuda de pôr onde seguir o meu raciocínio para resolver:
       
      Possuo um array X com dados que vem do meu backend, exemplo:
       
      array = [ 0: [1, 'Banana', '3.00', '...'], 1: [2, 'Maça', '4.00', '...'], 2: [3, 'Abacaxi', '5.00', '...'] ];
      Monto para o usuário uma tela com a tabela desses dados, com informações resumidas e um botão "detalhar" para exibir o conteúdo em um modal:
       
      | ID | Fruta | Preço| Ação | | 1 | Banana | 3.00 | Detalhar | | 2 | Maça | 4.00 | Detalhar | | 3 | Abacaxi| 5.00 | Detalhar | Até aí tudo certo, funciona redondo. Mas preciso fazer com que ao abrir o modal, independente do registro que cliquei (ID 1, 2 ou 3), eu possa "navegar" entre os outros registros no modal (possuo botões para isso) sem precisar sair do modal, como se fosse uma paginação.
       
      Como poderia construir essa lógica?
    • By Matheus Bispo
      Bom dia.
       
      Estou com uma situação, tenho um Objeto chamado parametros.params.
       
      Dentro deste objeto, pode vir 1 item ou 2 item ou 3 item, enfim, N itens.
       
      Exemplo:
       
      Parametros.params{
      carro: "Gol"
      };
       
      ou
       
      Parametros.params{
      modalidade: "Futebol",
      duracao: 90
      };
       
      Percebem que os nomes dos itens, os valores e a quantidade mudaram, isso é o que acontece no meu caso. Continuando...
       
      Tenho 2 funções:
       
      function chamarmetodo1(argument1, argument2){};
       
      function chamarmetodo2(argument){};
       
      Existe algum método de eu criar algo parecido com isso
       
      chamarmetodo1(parametros.params);
       
      chamarmetodo2(parametros.params);
       
      Ou seja, gostaria de chamar o método que for, indiferente de quantos parâmetros ele espera, e com os itens que vem dentro do meu objeto parametros.params, tem como fazer isso?
       
       
    • By bruno153
      Pessoal, 
       
      preciso super de uma ajuda com o seguinte problema, eu preciso transformar com o javascript um JSON dessa forma:

      {
        "registros": {
          "valores": [
            {
              "label": "DANILO KATHSON BILRO DE SOUZA",
              "data": [
                {
                  "realizado": "96.51"
                },
                {
                  "realizado": "94.58"
                },
                {
                  "realizado": "89.99"
                },
                {
                  "realizado": "93.38"
                }
              ]
            },
            {
              "label": "FRANCISCO GEILSON RAMALHO",
              "data": [
                {
                  "realizado": "88.94"
                },
                {
                  "realizado": "95.95"
                },
                {
                  "realizado": "94.20"
                },
                {
                  "realizado": "92.36"
                }
              ]
            }
          ]
        }
      }
       
      Para que ele fique dessa forma:

      {
        "registros": {
          "valores": [
            {
              "label": "DANILO KATHSON BILRO DE SOUZA",
              "data": ["96.51", "94.58", "89.99", "93.38"]
              ]
            },
            {
              "label": "FRANCISCO GEILSON RAMALHO",
              "data": ["88.94", "95.95", "94.20", "92.36"
              ]
            }
          ]
        }
      }

      poderiam me dar um caminho de como eu poderia fazer isso?

      Desde já, agradeço muito pelo atenção.
    • By carlosmassam
      Bom dia a todos. Eu tenho o seguinte código em HTML
      <input type="checkbox" id="checkmarcacao1" name="checkmarcacao1" value="checkmarcacao1"> <input type="time" id="hora101" name="hora101" disabled="disabled"> E tenho o seguinte código em Javascript
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function () { $('input[name=checkmarcacao1]').change(function() { if ($(this).is(':checked')) { $('input[name=hora101]').removeAttr('disabled'); } else { $('input[name=hora101]').attr('disabled',true); } }); }); </script> Esse meu código em Javascript faz o seguinte: Quando meu Checkbox está marcado, ele habilita o input time. Se eu desmarcar o checkbox, o input time é desabilitado.
      Acontece que se eu marcar o checkbox, escrever no input time, por exemplo: 12:34, depois desmarcar o checkbox o  input time fica desabilitado porém o valor 12:34 ainda fica escrito nele.
      Eu gostaria de saber como apagar o valor do input time quando o checkbox estiver desmarcado. 
       
      Quem quiser testar o código segue o link: https://jsfiddle.net/o8f3zvqu/
    • By gamesmax2
      Boa tarde,
      Pessoal estou com uma dificuldade no MYSQL, estou querendo obter dados de um cadastro caso ele tenha preenchido todos os Campos, tentei usar o Group by mas não tive sucesso.
       
      Minha tabela e a seguinte:
       
      Nome.              Pedido.            Status
      Daniel.              9955.                 Ok
      Daniel.              9954                  Ok
      Rafael.              9940                  Ok
      Rafael.              9941.                 Aberto
      Rafael.              9942.                 Ok
      Rodrigo.            9961.                 Ok
      Rodrigo.            9962.                 Ok
       
       
      Meu objetivo e puxar os nomes que estão com todos o pedidos relacionado em ok, no caso o Rafael não pode aparece pois ele tem um pedido Aberto, porém não conseguir fazer isso, pessoal peco a ajuda de VCS muito o obrigado.
       
      tentei isso aqui: SELECT nome, pedido, status FROM `cadastros` GROUP BY pedido, nome ORDER BY having status = 'Ok'  
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.