TESTE: jQuery não foi carregado! :(
Selecione um nó filho e clique no botão abaixo:
- Root node 1
- Root1 Child1
- Root1 Child2
- Root1 Child3
- Root node 2
- Root2 Child1
- Root2 Child2
- Root2 Child3
- Root node 3
- Root3 Child1
- Root3 Child2
- Root3 Child3
- Root node 4
- Root4 Child1
- Root4 Child2
- Root4 Child3
- Root4 Child1 Child1
- Root4 Child1 Child2
HTML
<div id="divArvore"><ul>
<li id="root_1">Root node 1
<ul>
<li id="root_1_child_1">Root1 Child1</li>
<li id="root_1_child_2">Root1 Child2</li>
<li id="root_1_child_3">Root1 Child3</li>
</ul>
</li>
<li id="root_2">Root node 2
<ul>
<li id="root_2_child_1">Root2 Child1</li>
<li id="root_2_child_2">Root2 Child2</li>
<li id="root_2_child_3">Root2 Child3</li>
</ul>
</li>
<li id="root_3">Root node 3
<ul>
<li id="root_3_child_1">Root3 Child1</li>
<li id="root_3_child_2">Root3 Child2</li>
<li id="root_3_child_3">Root3 Child3</li>
</ul>
</li>
<li id="root_4">Root node 4
<ul>
<li id="root_4_child_1">Root4 Child1</li>
<li id="root_4_child_2">Root4 Child2</li>
<li id="root_4_child_3">Root4 Child3
<ul>
<li id="root_4_child_1_child_1">Root4 Child1 Child1</li>
<li id="root_4_child_1_child_2">Root4 Child1 Child2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h2 id="h2Aviso"></h2>
SCRIPT
<script type="text/javascript">
$(document).ready(function() {
//Crio instância e passo argumentos para dar permissão para o método move_node.
$("#divArvore").jstree({
'core' : {
'check_callback' : function (operation, node, node_parent, node_position) {
// operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
// in case of 'rename_node' node_position is filled with the new node name
switch (operation){
case "move_node":
permissao = true;
break;
default:
permissao = false;
}//end switch
return permissao;
}
}
});
//Quando clicar no 'botão mover para cima'
$('#buttonMoverCima').on('click', function(){
//limpa qualquer aviso dado anteriormente
$('#h2Aviso').html('');
arrayIDs = $.jstree.reference('#divArvore').get_selected(false);
//arrayIDs = $('#divArvore').get_selected(false);
if (arrayIDs.length === 0){
$('#h2Aviso').html('Por favor, escolha um nó!');
}else if(arrayIDs.length > 1){
$('#h2Aviso').html('Por favor, escolha somente um nó!');
}else{
strId = arrayIDs[0];
strSeletor = '#' + strId;
nodeSelecionado = $(strSeletor);
mover_cima(nodeSelecionado);
$('#h2Aviso').html(strSeletor);
}//end if
});
$("#h4Carregamento").html("TESTE: jQuery foi carregado! :)");
});
//LIMITAÇÃO: Não funciona com nós raiz.
function mover_cima(nodeMover){
nodeAnterior = nodeMover.prev();
if (nodeAnterior.length) {
posicao = posicao_node(nodeMover);
if (posicao !== 0){
posicao--;
nodePaiAnterior = nodeAnterior.parent();
//essa função filha da puta só adiciona como filho, quando passado um número :@
//então para poder adicionar no mesmo nó, eu pego o pai do nó anterior
$("#divArvore").jstree(true).move_node(nodeMover, nodePaiAnterior, posicao);
}//end if
}//end if
}//end function
//Retorna a posição que o nó está
//IMPORTANTE: Primeiro elemento índice = 0.
function posicao_node(node){
posicao = -1;
while (node.length) {
posicao++;
node = node.prev();
}//end while
return posicao;
}//end function
</script>
