0

tenho o este código e gostaria de atualizar o valor dentro da div com base na posição em que ela ocupa. Já consegui obter o valor dela quando a ordem é alterada, mas não consigo obter outras propriedades do elemento.

2 Respostas 2

2

Para obter os atributos da DIV é bem simples, pois a instancia DOM de cada DIV é recuperada pelo objeto ui.item que vem como parâmetro do evento, que por sua vez é um objeto jQuery portanto seus atributos podem ser acessados pelos métodos do jQuery (.attr() .data() e etc..)

um exemplo:

 update: function(event, ui){
          var element = ui.item;
          console.log(element.text());
 }
1

Consegui, o código pode ser visto a seguir:

$(function() {

    $("#conteudo").sortable({
      axis: 'y',
      handle : ".ico",
      start: function(event, ui) {
        ui.item.startPos = ui.item.index();
    },
      update: function(event, ui){
        console.log("Posição inicial: " + ui.item.startPos + " Nova posição: " + ui.item.index());

        // Atualizando index para o usuário...
        // Obtendo todos os itens:
        var itens = $(this).children();
        console.log("Quantidade de itens: " + itens.length);

        // Atualizando valor em cada item:
        itens.each(function(){
          var item = $(this).children();
          console.log("Quantidade de filhos: " + item.length);

          var newVal = $(this).index() + 1;
          $(item).children('.index').html(newVal);

        });

        console.log("***********************************");
      }
    });

    $("#conteudo").disableSelection();

  });
.item { width: 100%; height: 90px; border: 1px solid black;}
  .item:hover {
    border: 3px solid black;
  }
  #conteudo { width: 95%; height:500px; border:2px solid #ccc; padding: 10px; }
  .ico {
    float: left;
    width: 3%;
    border: 2px solid #fff000;
    cursor: move;
  }
  .conteudoItem{
    float: left;
    width: 90%;
  }
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="conteudo">

  <div id="item0" class="item">
    <div class="ico">|||</div>
    <div class="conteudoItem">
      <p class="index">1</p>A
    </div>
  </div>

  <div id="item1" class="item">
    <div class="ico">|||</div>
    <div class="conteudoItem">
      <p class="index">2</p>B
    </div>
  </div>

  <div id="item2" class="item">
    <div class="ico">|||</div>
    <div class="conteudoItem">
      <p class="index">3</p>C
    </div>
  </div>

  <div id="item3" class="item">
    <div class="ico">|||</div>
    <div class="conteudoItem">
      <p class="index">4</p>D
    </div>
  </div>

</div>

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 .