Jump to content
nmoa

Mudar ordem

Recommended Posts

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>
	

Share this post


Link to post
Share on other 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."

 

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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."

 

Share this post


Link to post
Share on other 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?

Share this post


Link to post
Share on other 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...

  • Vote 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."

 

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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."

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.