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 camargo.2018
      Alguem sabe como posso fazer pra puxar imagens do google 
       
      Ex:
      $pesquisa = "fernando e sorocaba";
      e ele me retorna somente uma imagem
       
       
      pfv me ajudem !!!!!
    • By lordgreen
      Olá, andei procurando e não encontrei exatamente o que preciso então, talvez alguém possa me ajudar.
      Eu quero colocar um site em modo horizontal e não consigo pensar em como fazer isto. Deixe-me explicar melhor, tenho uma imagem com altura de 960px e largura de 5000px, ponho ela como background da página e fica a barra em baixo e não em cima, gostaria de saber como mover essa barra para o lado com a roda do mouse (no ato do scrolling). 
      Deve ser uma coisa bem simples, porém realmente não consigo fazer e não encontro exatamente o que procuro na internet, só encontro como colocar menu na horizontal, enfim.
       
      Obrigado a todos.
    • By 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.
    • By 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.
    • By 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;                 }  
×

Important Information

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