Ordenar imagens com o mouse

joelzsbit · Agosto 30, 2018

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>

wanderval · Agosto 31, 2018

fiz uma implementação usando essa logica

link jsbin: https://jsbin.com/webiheqaro/edit?js,output

joelzsbit · Agosto 31, 2018

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?

wanderval · Agosto 31, 2018

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!

joelzsbit · Setembro 1, 2018

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.

joelzsbit · Setembro 6, 2018

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.

Entrar

Arquivado

Ordenar imagens com o mouse

Recommended Posts

joelzsbit 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

wanderval 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

joelzsbit 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

wanderval 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

joelzsbit 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

joelzsbit 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante