Ir para conteúdo
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>

 

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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!

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por MateusOFCZ
      Olá, gostaria de saber como eu faço para mostrar uma imagem diferente ao acessar o site...
      Eu precisaria mostrar a imagem linkada, ou seja, quando clickar na imagem ela levará você para um link, porém cada imagem tem um link diferente, como faço isso?
      Caso você não tenha entendido seria uma espécie de "anúncios" em meu site, toda vez que reentrar nele irá mostrar uma imagem diferente, e essa imagem será linkada, e os links também serão diferentes um do outro.
    • Por JOWEB
      Olá pessoal.
      Preciso de ajuda novamente a algum tempo vendo uns videos no Youtube encontrei um video onde ensinava como deixa a imagens dos slide com tamanho único, onde o mesmo código eu adicionava no código CSS. Estou usando o tema colorMag, o mesmo tem um slide logo no topo do site so que quando mando uma imagens que nao tem o tamanha 800x445px a imagens faz com que o site fica dançando. Alguém pode me ajudar.
    • Por ragnaproxy
      Boa tarde pessoal.
      Seguinte, estou usando um sistema que não foi criado por mim, até porque meu conhecimento em php e bem pouco.
      Bom, resumindo... Ele tem uma função que quando o usuário coloca um link na textarea, ele tira uma screenshort do site do link e salva a imagem em uma pasta.
      Ate ai está funcionando normal, problema e que as imagem estão sendo salvas no tamanho de 320x179, e desfocadas, rodei o codigo todo e não achei onde alterar isso.

      Segue a parte do código que faz essa função:
       
                      $escapeObj = new \SocialKit\Escape();                 $get_meta_tags = grab_meta_tags($url);                 $meta_tags = array();                 $meta_tags['title'] = $escapeObj->stringEscape($get_meta_tags['title']);                                  $meta_tags['img_preview'] = $get_meta_tags['img_preview'];                 $imgdata = base64_decode($meta_tags['img_preview']);                 $im = imagecreatefromstring($imgdata);                 if ($im !== false)                 {                     $imgfile = $metadir . '/' . $urlname . '.png';                     imagejpeg($im, $imgfile);                     imagedestroy($im);                     $meta_tags['img_preview'] = $imgfile;                 }  
    • Por Otavio Laskosky
      Ola, estou tentando mostrar na pagina uma imagem pelo codigo de um jpg.
      1º - Pego o código do jpg que está fora do meu projeto(estou usando o XAMPP) com a seguintes funções em PHP:
      $ch = curl_init("file:///C:/Users/desenv/Desktop/13161229799251-t1200x480.jpg");
      $imagem = curl_exec($ch);
      2º - tento emitir a imagem pelo html usando o base64:
      <img src="data:jpeg;base64,<?php echo $imagem ?>
      O sistema só me mostra o codigo e não a imagem.
      Obs.: Já tentei sem o base 64. Não posso gerar um arquivo temporário dentro do projeto por questões de segurança;
      Alguém pode me ajudar por favor?
       
      Em anexo imagem de exemplo.
    • Por Fabio Jonas
      Pessoal,
       
      Não tenho muita experiencia com wordpress, foi migrado um site em wordpress de um servidor para o outro, foi configurado o banco de dados tudo certinho e o site funcionou, porem as imagem dos produtos não carregaram, verifiquei e estão na pasta certinho e o link aponta para a pasta correta, copiei o link e verifiquei no navegador e a imagem abre. Alguem poderia ajudar para resolver isso.
      O site é http://www.jnzaffiri.com.br e as imagens que não carregam são dentro do link PRODUTOS.
      Obrigado.
×

Informação importante

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