Publicado em 30 de ago.

Ordenar imagens com o mouse

#desenvolvimento-frontend #imagens #mouse #ordem #tela

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>

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

wanderval· 31 de ago.

fiz uma implementação usando essa logica

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

joelzsbit· 31 de ago.

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· 31 de ago.

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· 1 de set.

12 horas atrás, wanderval disse:

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· 6 de set.

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.