Jump to content
joelzsbit

Ordenar imagens com o mouse

Recommended Posts

Pessoal, como que faço para gravar a ordem das imagens que foi ordenada com o mouse, usando esse codigo:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2, #div3  {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="/imagens/img_cod/924081810.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="/imagens/img_cod/924081810.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


</body>
</html>

 

Share this post


Link to post
Share on other sites

Amigo, analisando tua implementação acredito que no meu código falta  data-id, uma div para setar a ordem e também renomear as function:

onde consta:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

Substitui por:

<div id="div1"  data-id="1" ondrop="drop(ev)" ondragover="allowDrop(ev)">

e também coloquei uma div para setar o resultado:

  <div class="container-drop"></div> 

porém mesmo assim não houve erro e não me mostrou nenhum resultado.

O que sera que falta?

Share this post


Link to post
Share on other sites

Bom amigo essa div com a classe "container-drop" foi eu que coloquei e como o nome diz, ela serve para ser um container assim quando for manipular atravéz do javascript terá acesso a todos os filhos desse elemento. Essa div havia sido removida e o código não estava funcional.

 

Sobre o atributo data-id, sim você pode usar um atributo foi utilizado o atributo "id" por ser esse meio que disponibilizou em seu HTML.

 

O código está funcionando após eu retornar a div container, o ponto e que a ordem está sendo exibida apenas no console não em um elemento HTML.

 

Eu criei um metodo que seta no Elemento HTML com o id "result", a lógica claramente não está clean pq isso vai depender do seu layout

link jsbin: https://jsbin.com/datececeku/edit?html,css,js,output

 

PS: só uma dica essa lógica foi somente adaptada a sua lógica inicial, mas hoje existe um problema quando é feito o drop em uma box cuja já esteja com um elemento img a mesma é substituida, isso acredito que tenha que ser validado no momento do drop verificando se o box já contém algum elemento de img!

Share this post


Link to post
Share on other sites

 

12 horas atrás, wanderval disse:

PS: só uma dica essa lógica foi somente adaptada a sua lógica inicial, mas hoje existe um problema quando é feito o drop em uma box cuja já esteja com um elemento img a mesma é substituida, isso acredito que tenha que ser validado no momento do drop verificando se o box já contém algum elemento de img!

Então nesse caso é melhor usar o http://jqueryui.com/sortable/#display-grid, que supre bem minha necessidade de uma maneira bem simples e não acontece de substituir a img. O problema é que usando o sortable ainda não consegui fazer setar a ordem em uma div ou num input para que eu possa pegar a ordem com o php e salvar no banco mysql.

Share this post


Link to post
Share on other sites

Usando o sortable, agora consegui setar a ordem tanto na div como no input fazendo assim:

document.getElementById('resultado').innerHTML = valores; ///passa para a div
document.getElementById('resultado2').value = valores; // passa para o input

 

Então o código ficou da seguinte forma:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="//code.jquery.com/jquery-1.12.4.js"></script>
        <script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
        <style>
            #sortable {list-style-type: none; margin: 0; padding: 0; width: 450px;}
            #sortable li {margin: 3px 3px 3px 0; padding: 1px; float: left; width: 110px; height: 90px; font-size: 4em; text-align: center; }
            #sortable li img {height:80px; width:100px;} 
            .oculta_span{display:none;}
        </style>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <script>

                $(function () {
                    $("#sortable").sortable();
                    $("#sortable").disableSelection();

                    $('.salvar').click(function () {
                        var valores = new Array();
                        $('#sortable .ordem').each(function () {
                            valores.push($(this).html());
                        });
                        document.getElementById('resultado').innerHTML = valores; ///passa para a div
                        document.getElementById('resultado2').value = valores; // passa para o input
                    });
                });
            </script>

    </head>

    <body>
        <div class="row">
            <form method="post" name="form1"   role="form"  action="<?php echo $_SERVER['PHP_SELF'] ?>" enctype="multipart/form-data">
                <ul id="sortable">
                    <li class="ui-state-default"><span class="ordem">1</span></li>
                    <li class="ui-state-default"><span class="ordem">2</span></li>
                    <li class="ui-state-default"><span class="ordem">3</span></li>
                    <li class="ui-state-default"><span class="ordem">4</span></li>
                    <li class="ui-state-default"><span class="ordem">5</span></li>
                    <li class="ui-state-default"><span class="ordem">6</span></li>
                    <li class="ui-state-default"><span class="ordem">7</span></li>
                    <li class="ui-state-default"><span class="ordem">8</span></li>
                    <li class="ui-state-default"><span class="ordem">9</span></li>
                </ul>

                <div id="resultado" style=""></div> 
                <input type="text" name="resultado2" id="resultado2" class="form-control largura450" value="">
                <button type="submit" class="btn btn-primary btn-lg salvar"> Salvar </button>
                <input type="hidden" name="acao" value="cadastra" />
            </form>
        </div>
    </body>
    <?php
    if ($_POST["acao"] == "cadastra"):
        $arrayOrdem = explode(",", trim($_POST['resultado2'])); // trim retira os espaços e coloca no array onde encontrarr a virgula
        $quantidade = count($arrayOrdem); // conta quantos itens foi encontrado
        for ($i = 0; $i < $quantidade; $i++) {
            echo 'Nr: '.$arrayOrdem[$i];
            echo '<br>';
        }
    endif;
    ?>
</html>

A principio deu certo, vou fazer mais testes e posto aqui novamente.

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

  • Similar Content

    • By Anonm
      Gostaria de colocar em cada variável a ordem de um numero que o usario digitar, mas que os valores sejam absolutos e n relativos.
      Por exemplo, se o usuário colocar 110, o programa vai colocar na variável und o valor da unidade, na variável dez o valor das dezenas, e na variável cen o valor das centenas, ficando:
      und=0
      dez=1
      cen=1
      mas o limite deve ser da casa do bilhão, ou seja, o usuário pode colocar ate 9 bilhões que ainda vai colocando o valor das ordens nas variáveis.
      Como pode ser feito? 
    • By Ana Gauna
      Eu já tentei diversas vezes, mas ainda não consegui fazer funcionar.  Inclusive já alterei o arquivo .htaccess mas isso não funcionou.  Estou tentando criar um bloqueio em página de site online, para bloquear o download de imagens, bloquear o download de fotografias.  Estou tentando também criar o bloqueio de impressão da tela de um site, para fazer o control p parar de funcionar em determinada página do site.    Vi na internet sites que tem isso funcionando direito.  Eu ainda não consegui criar.  Alguém sabe como fazer?   Eu sei um pouco de PHP, este mês comprei 3 livros novos de PHP que estou estudando para tentar me ajudar nas minhas dúvidas...
      Boa noite
    • By asacap1000
      Salve galera, preciso de uma ajuda aqui....eu preciso trazer algumas fotos de usuarios que estão gravados em outro servidor e mostrar em uma página.
       
      O que estou usando inicialmente apenas para carregar as fotos e depois vou personalizar com outras funções. Mas o basico é esse:
       
      <? $diretorio = "//SRVCAMARAFRIA/Sistema de Acesso/AcessoNet/fotos/"; // esta linha não precisas é só um exemplo do conteudo que a variável vai ter // selecionar só .jpg $imagens = glob($diretorio."*.jpg"); // fazer echo de cada imagem foreach($imagens as $imagem){ echo '<a href="'.$imagem.'"><img src="'.$imagem.'" /></a>'; } ?> Ele busca as imagens mas não as mostra segue print do resultado:
       

       
      Se eu posicionar o cursor em cima de uma delas ela aparece no rodapé o caminho e o nome da foto
       

       
       
      O link para abrir ela eu nem preciso apenas para mostrar na tela, poderiam me ajudar?
       
      Desde já Agradeço.
    • By Alessandro Bodão
      Boa tarde Amigos!
       
      Criei um tema wordpress pro meu cliente e ele precisa de uma galeria de imagens na qual possa administrar e publicar novas imagens, como não tenho muito conhecimento de sistemas, php, etc procurei por plugins... mas não consigo aplicar eles à página de jeito nenhum. To desesperado vcs poderiam me ajudar a criar uma galeria do 0 ou resolver o erro do plugin não funcionar???
    • By Pablo Bernardo
      Há alguma maneira de esconder o mouse e fazer com que só seja possível a navegação através das "setinhas" do teclado?
      Gostaria de fazer uma especie de rodapé que seja controlado pelas "setinhas" e ao clicar com "enter" teria a mesma função que clicar com o mouse
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.