Ir para o conteúdo
nmoa

Mudar ordem

Mensagens Recomendadas

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>
	

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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.


10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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.


10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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?

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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...

  • Voto 1

10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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?

 


10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.