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
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());
}
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>