how to use the Jquery sortable update method?

Question

have the this code and would like to update the value within the div based on the position it occupies. I’ve already been able to get its value when the order is changed, but I can’t get other element properties.

Answer 1

To get the attributes of the DIV is very simple, because the DOM instance of each DIV is recovered by the object ui.item which comes as an event parameter, which in turn is a jQuery object so its attributes can be accessed by jQuery methods (.attr() . date() and etc..)

an example:

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

Answer 2

I got it, the code can be seen below:

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