Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

joelzsbit

Ordenar imagens com o mouse

Por , em Desenvolvimento frontend

Recommended Posts

joelzsbit    1

joelzsbit
Postado

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>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

joelzsbit    1

joelzsbit
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

joelzsbit    1

joelzsbit
Postado

 

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

joelzsbit    1

joelzsbit
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Motta
      Banco de Imagens de ícones público
      Por Motta
      Prezados ,
      Onde tenho um Banco de Imagens de ícones Público disponível para dowmload.
       
      Coisa básica
    • Sapinn
      Resolução da tela automaticamente
      Por Sapinn
      Fala galera existe algum meio que eu possa usar para saber automaticamente o tamanho da tela usando apenas javascript????
       
      Eu sei como saber o tamanho da tela usando:
       
      if (window.matchMedia("(max-width:800px)").matches) {         console.log('Menos que 800')       } else {         console.log('Mais que 800')       }  Ainda assim, preciso atualizar a pagina para conseguir obter o resultado, existe alguma maneira de fazer isso sem atualizar a página.
           
    • ernestovm
      Problema de atualização no mobile
      Por ernestovm
      Seguinte. Eu não, mas acho que TODOS os desenvolvedores estão no mato sem cachorro no que se refere a esse problemão, que é a atualização do site lá no browser do seu usuário/visitante. Seja no acesso pelo computador e, pior ainda, pelo celular.
      Quando altero o arquivo stylo.css ou alguma imagem o browser, principlmente o Google Chrome NÃO ATUALIZA. No computador, só atualiza se eu teclar CTRL+F5, mas se pensarmos no visitante não dá né? "Nivelando por baixo", imagine aquele visitante do seu site que não entende bulufas... Vou ter que colocar no site um aviso pra todo mundo apertar CTRL+F5 para atualizar a página? Quando? Sempre? Um INFERNO.
      E quanto ao acesso do visitante pelo celular? Pior ainda.
      Então estou à procura de uma solução transparente ao usuário. No que se refere às imagens, encontrei soluções razoáveis, mas quanto ao arquivo CSS, nada encontrei.
      Se alguém souber de alguma "mágica" que resolva esse problema, compartilhe. TODOS os demais desenvolvedores agradecem.
      Obrigado
       
    • Davi Araújo
      Imagens não aparecem
      Por Davi Araújo
      Boa tarde, amigos
       
      Baixei os arquivos de um site WP, exportei o banco de dados e subi em outra hospedagem (mesmo domínio), mas agora as imagens não aparecem
       
      O que devo fazer? Alguma dica? 
       
      http://picanhadojonas.com.br/
    • unset
      Como ordenar strings que começam com números?
      Por unset
      Olá, alguém poderia me dar uma luz.
       
      Como faço para ordenar strings que começam com números, exemplo
       
      Tenho uma lista de artigos e os nomes são como abaixo.
       
      1 - NOME DO ARQUIVO 1
      2 - NOME DO ARQUIVO 2
      etc....
      10 - NOME DO ARQUIVO 10
       
      Não consegui ordenar no SELECT com o ORDER BY nome DESC pq o número 10 fica abaixo do 1
       
      Como fazer assim, 1,2,3,4,5....... 10,11,12 .... 100, 101,102 etc...
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito