Mudar ordem

[nmoa]

Boa tarde

Tenho um questão.

Tenho uma listagem de fotos e gostaria que ao arrastar uma para a frente da outra a ordem fosse alterada

Eu tenho o efeito de arrastar feito...mas falta saber fazer a alteração da ordem.

O output que está a dar é:

$(document).ready (function (){
                 
              
                "use strict";
        // Init Theme Core
        Core.init();
        
          var last_touched = '';
var updateOutput = function(e){   
 
var list   = e.length ? e : $(e.target),
    output = list.data('output');
if (window.JSON) {
    output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));

        $.post('entrada.php?page=26', 
            { 'whichnest' : last_touched, 'output' : output.val() }, 
            function(data) {
              
            }
        );
} else {
         output.val('JSON browser support required for this demo.');
    }
};
        //console.log(list.nestable('serialize'));
          // Init Nestable on list 1
        $('#nestable').nestable().on('change', updateOutput);
        
        // nestable serialized output functionality
        updateOutput($('#nestable').data('output', $('#nestable-output'))); 
             })
             

[{"id":2},{"id":1}]

O meu PHP está assim:

<textarea id="nestable-output" class="form-control"></textarea>
<?php
require_once("../connect.php");connect();
          $imagens= mysql_query("SELECT * FROM imovel_imgs where id_imovel=".$_GET["id"]."");
          $contagem= mysql_num_rows($imagens);
          if ($contagem>0){
              echo '<div class="ativo">';
          }else {
              echo '<div class="resposta">';
          }
          ?>
         <h4>Imagens Inseridas</h4><br>
              <div id="nestable" class="dd mb35">
                  <ol class="dd-list">
              <?php
              
              while ($img= mysql_fetch_array($imagens)){
                  echo '<li data-id="'.$img["ordem"].'" class="dd-item">
                <div class="dd-handle">ordem: '.$img["ordem"].'</div>  
                  <img src="./uploads/'.$img["file"].'" width="100px" class="data-dz-thumbnail" />
         
<br>
<div class="btn-group">
  <button  style="padding:2px" type="button" onClick="apagar('.$img["id_imovel_imgs"].')" class="btn btn-danger btn-block-sm"><i class="fa fa-times"></i></button>
</div>
	</li>';
              }
?>
                  </ol>
              </div>
	

[M6]

Já tens ai um atributo que define a ordem, isto pelo que compreendo.

A primeira coisa que tens de fazer é um "order by ordem" na tua query, para garantir que as fotos vêm ordenadas por esse campo.
Depois, sempre que uma foto for movida, atualizas esse valor.
Pode ser necessário uma atualização dos valores de ordem de outras fotografias, mas isso vai depender da tua implementação no que toca à ordem.

[nmoa]

3 minutos atrás, M6 disse:

Já tens ai um atributo que define a ordem, isto pelo que compreendo.

A primeira coisa que tens de fazer é um "order by ordem" na tua query, para garantir que as fotos vêm ordenadas por esse campo.
Depois, sempre que uma foto for movida, atualizas esse valor.
Pode ser necessário uma atualização dos valores de ordem de outras fotografias, mas isso vai depender da tua implementação no que toca à ordem.

pois

mas falta mesmo isso,,,,actualizar esses valores atraves da mudança  em javascript...

isto por oq ue tem ordem 2 passará  a ter ordem 1 e vice versa

[M6]

Bom, quando ocorre o evento de mudança de ordem, tens de fazer uma chamada ao servidor com o novo valor da ordem e atualizar todos os que estão para a frente.

Por exemplo, tens 5 fotos, moves a 4 para 3º lugar, tens de atualizar a 3 e a 4 para 4 e 5 e a 4ª passa a ser a terceira.

[nmoa]

Em 8/26/2016 às 16:50, M6 disse:

Bom, quando ocorre o evento de mudança de ordem, tens de fazer uma chamada ao servidor com o novo valor da ordem e atualizar todos os que estão para a frente.

Por exemplo, tens 5 fotos, moves a 4 para 3º lugar, tens de atualizar a 3 e a 4 para 4 e 5 e a 4ª passa a ser a terceira.

pois isso já eu sei, falta é  o código...sabes como fazer?

[M6]

No evento de mudança de ordem tens de saber onde encaixaste a imagem. Depois tens de fazer uma invocação ajax ao servidor para fazer o pedido com a identificação da imagem e o novo id de ordem, algo do tipo

$.post("reordenar.php", 
	{ 'id_do_imovel_que_mudou_de_posição' : img_id, 'nova_posicao_da_imagem' : nova_posicao }
);

No servidor, quando recebes o pedido, no reordenar.php, empurras as imagens cuja ordem tem de mudar:

update imovel_imgs
set ordem = ordem + 1
where ordem >= nova_posicao_da imagem

depois atualizas a ordem da imagem que mudou

update imovel_imgs
set ordem = nova_posicao_da_imagem
where id_imovel = id_do_imovel_que_mudou_de_posição

Quanto ao restante código vais mesmo ter de te desenrascar...

[nmoa]

Obrigado

vou experimentar as tuas dicas ?

[nmoa]

hi

já estou a conseguir passar para a bd o primeiro update, ele reduz a ordem

mas não está a dar o segundo update

ou seja tenho a ordem : 1 2 3

quero mudar o 2 para o lugar do 1 e alterar o número mas não estou a conseguir

tenho assim o código que está a receber os dados

function update_upload_imagens(){
    $ordem = $_POST["ordem_imagem"];
    $inicial = $_POST["imagem_inicial"];

    $sql = "UPDATE `imovel_imgs` SET  ordem= ordem-1 where ordem >= ".$ordem."";
    
    $sql2 ="UPDATE imovel_imgs SET `ordem` = ".$ordem." where `id_imovel_imgs` = ".$imagem_inicial." ";
    
    $result=mysql_query($sql);
    $result2=mysql_query($sql2);
    echo "primeiro: ".$result." segundo: ".$result2 ;
}

o jquery na primeira página

$('#nestable').nestable().on('change', function (){
    $(".dd-item").each( function(e) {
        var dados= $(this).attr('data-id');
        var img= $(this).attr('data-imagem'); 
        $.post('entrada.php?page=26',{ 'imagem_inicial' : img, 'ordem_imagem' : dados 
        });
        return false;
    });
});

obrigado

[M6]

Antes de mais, no primeiro update tens "ordem= ordem-1" e tem de ser "ordem=ordem+1". Esta fórmula do +1 funciona para qualquer ordenação,  quer seja passares o 2 para a posição do 1 quer seja o 2 para a posição do 3.

Quando dizes que não está a dar isso quer dizer precisamente o quê? É um erro de SQL?

[nmoa]

ja consegui resolver o assunto

obrigado